How to do role based access routing in react

Question

I want to give permissions to some pages to users, some more pages access to manager and all pages access to admin.

if user admin loggedin

const role = 'admin'
{role === 'admin' ? (
    <>    
      <Route path='/' component={Home} />
      <Route path='/products/' exact={true} component={Products} />
 <Route path='/products-edit' exact={true} component={ProductsEdit} />
<Route path='/all-products' exact={true} component={AllProducts} />
</>
)}

if user manager loggedin

{role === 'manager' ? (
    <>    
      <Route path='/' component={Home} />
      <Route path='/products/' exact={true} component={Products} />
 <Route path='/products-edit' exact={true} component={ProductsEdit} />
</>
)}

if user logged in

{role === 'user' ? (
    <>    
      <Route path='/' component={Home} />
      <Route path='/products/' exact={true} component={Products} />
</>
)}

Is there any issue with the implementation? What are you asking for help with? Does this help answer your question? https://stackoverflow.com/a/66289280/8690857 Basically swap "auth" for "role" in the implementation. — Drew Reese, Sep 02 '22 at 05:37
no, actually, I am using react-router-dom v5 cant use outlet and navigate, 3 different roles are there, if you can help me out, by posting the code, after login i get role name based on that i need to give route access — Asif Kaif, Sep 02 '22 at 05:54
user can have access to 2 page, manger can have access to 3 pages, admin can have access to all pages — Asif Kaif, Sep 02 '22 at 05:55
The answer I linked include route protection solutions for both RRD v5 and v6. Can you edit your post to include a more complete and comprehensive [mcve] so we've better context for what the code is doing and variables declared and referenced? — Drew Reese, Sep 02 '22 at 05:56
For role base integrate you just need to create AuthGuard for your routes, AuthGuard is a strategy to implement the authenticated based on role, add your role condition inside AuthGuard. like you have 3 roles, user, admin & manager, just create 3 Guard for each roles, UserAuthGuard, AdminAuthGuard, ManagerAuthGuard, you can check full documentation here. https://romik-mk.medium.com/authguard-react-router-v6-764f049e172d — Romik Makavana, Sep 02 '22 at 06:02

score 3 · Accepted Answer · answered Sep 02 '22 at 06:51

You can create a special RoleRoute component that takes an array of roles that have access to that route, and check this against the current role value a user has. If the user has an appropriate role then they can access the route, otherwise render a redirect off the route.

Example:

const RoleRoute = ({ role, roles = [], ...props }) => {
  return !roles.length || roles.includes(role) ? (
    <Route {...props} />
  ) : (
    <Redirect to=".." />
  );
};

...

<Switch>
  <RoleRoute
    path="/products"
    role={role}
    roles={["admin", "manager", "user"]}
    component={Products}
  />
  <RoleRoute
    path="/products-edit"
    role={role}
    roles={["admin", "manager"]}
    component={ProductsEdit}
  />
  <RoleRoute
    path="/all-products"
    role={role}
    roles={["admin"]}
    component={AllProducts}
  />
  <Route path="/" component={Home} />
  <Redirect to="/" />
</Switch>

Demo

Worked on April 2023 with React Router DOM version 5.3.4. This example is the one I was looking for. Thankyou! — Sastrabudi, Apr 16 '23 at 06:15

score 0 · Answer 2 · answered Sep 02 '22 at 06:00

Is the code working and you what you need is to simplify the code? If so, and you have only 3 roles, then I guess the below code would also work as the same as your code and also reduce the lines of code.

<Route path='/' component={Home} />
<Route path='/products/' exact={true} component={Products} />
{role !== 'user' && <Route path='/products-edit' exact={true} component={ProductsEdit} />}
{role === 'admin' && <Route path='/all-products' exact={true} component={AllProducts} />

How to do role based access routing in react

2 Answers2

Demo

Linked