Routing and Navigation and handle public, private, authorized route

In our frontend application, we use React Router for handling routing and navigation. React Router is a popular routing library for React applications that provides declarative routing capabilities.

Installation

To install React Router Dom, you can use npm or yarn:

npm install react-router-dom
or
yarn add react-router-dom

Building our Role-based access component

To build our Role-based access component, we’ll follow this process;

When an employee signs in, the employee’s role and JWT token are stored in the Auth state.
When this employee requests access to a protected route, our role-based access component will access the Auth state and retrieve the employee’s role.
The employee’s role will then be cross-checked with an array containing the required roles for that route.
If the user’s role matches the required role, access is granted, else access will be denied.

Here’s the code for this;

import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useContext } from "react";
import AuthContext from "../Context/authProvider";
import React from "react";
const Auth = ({ allowedRoles }) => {
  const { auth } = useContext(AuthContext);
  const location = useLocation();
  return allowedRoles.find((role) => auth.role.includes(role)) ? (
    <Outlet />
  ) : auth?.name ? (
    <Navigate to="/unauthorized" state={{ from: location }} replace />
  ) : (
    <Navigate to="/register" state={{ from: location }} replace />
  );
};
export default Auth;

With this done, we’ll wrap each protected route with this component and pass to this component the required role for each page;

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
const App = () => {
  return (
    <Routes>
  <Route path="/" element={<Layout />}>
    <Route path="/linkpage" element={<LinkPage />} />
    <Route path="/register" element={<Register />} />
    <Route path="/signin" element={<Signin />} />
    <Route path="/unauthorized" element={<Unauthorized />} />
    <Route path="/home" element={<Home />} />
    <Route element={<Auth allowedRoles={["marketer"]} />}>
      <Route path="/marketers-only" element={<MarketersPage />} />
    </Route>
    <Route element={<Auth allowedRoles={["se"]} />}>
      <Route path="/se-only" element={<SEPage />} />
    </Route>
    <Route element={<Auth allowedRoles={["se"]} />}>
      <Route path="/hr-Only" element={<HRPage />} />
    </Route>
  </Route>
</Routes>;
  );
};
export default App;

With these done, every group has access to only their specific route.