CODEWITHSUNDEEP
authenticationreactjsoauthreact-routeracl
J. Shaker
J. Shaker

Reputation: 195

React Router: Handling role authentication

I'm developing a web app with multiple roles. I had an idea of a way I could use React Router to restrict access on some routes with the onEnter trigger.

Now I wanted to know if this is a reliable way to to prevent access to unauthorized pages. Basically, how easy is it to hack this? It just shouldn't be too easy to hack, that's all.

Bare in mind that there's still server-side authentication on all the resources that are being loaded, so even if a user does breach through the React Router, no unauthorized data is ever returned.

  <Route path="/" component={App}>
    <IndexRoute onEnter={authenticateUser} />
    <Route path="login" component={LoginPage} />
    <Route path={roles.ADMIN.homeRoute} component={Admin} onEnter={authenticateAdmin}>
      <IndexRoute component={DashboardPage} />
    </Route>
    <Route path={roles.OPERATIONS.homeRoute} component={Operations} onEnter={authenticateOperations}>
      <IndexRoute component={DashboardPage} />
    </Route>
  </Route>

Currently the role routes are only populated with Dashboard, but the idea is that each Role route will contain multiple subroutes. With this configuration, I am hoping that I can authenticate a user for his role when entering a restricted role route, but then is able to navigate between subroutes without authenticating on every route change.

Upvotes: 3

Views: 1473

Answers (1)

Mario Tacke
Mario Tacke

Reputation: 5488

It would be as easy as modifying the state that caches your roles. As long as you have server side auth for each resource, this is not a problem. If anything, they might be able to see the layout of the component, but no data.

Upvotes: 2

Related Questions