Routing

Routing is what allows us to display different components at the different URLs. The routing is mainly implemented using the react-router package along with a few extra components to handle authentication for the routes.

App.jsx

Within App.jsx is where our routing is mainly handled. We have different types of route components, each for a different level of authentication, but the props for each are essentially the same.

<AdminProtectedRoute
    exact
    path="/usercrm"
    render={(props) => <CRM {...props} />}
/>

As for the specific route components themselves, there are three:

Route

Part of the aforementioned react-routing package, routes using this component are accessible to all users.

AuthProtectedRoute

This component first checks if the session has expired by comparing the timestamp at that moment to the expiry timestamp. Otherwise, it will then check for authentication from Redux and if not authenticated, the user will be redirected to the /login route.

Both clients and admins have access to the routes using this component as long as they are logged in.

AdminProtectedRoute

This component checks the role ID of the current user. If it doesn't match the proper admin or super admin role IDs, then access to the page is not provided.

Only logged-in admins and super admins have access to the routes using this component.