Route Overview

Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are public pages and any user can access them

Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are public pages and any user can access them. However there are many pages that only authenticated users can access, those paths are called Protected path. In Crema, we have provided the functionality of route protection. In crema we have categorized the routing in the 3 different category like below

• Un-Authorized Route: In this category only the authentication routes come like sign-in, sign-up, forgot-password etc.

• Authorized Route: All the protected routes land in this category. only authenticated user can access these routes(pages)

• Anonymous Route: In this category general purpose pages comes. these page doesn't belongs to user authorization state. like 404, 500, maintenance, coming soon etc Here is the main routing structure

 <AppErrorBoundary>
  {generateRoutes({
    isAuthenticated: isAuthenticated, // user authentication state 
    userRole: user.role,              // user role
    unAuthorizedStructure,            // all the un-authentated routes goes here
    authorizedStructure,              // all the authentated routes goes here
    anonymousStructure,               // all the anonymous routes goes here
  })}
  <Routes>
    <Route path='/' element={<Navigate to={initialUrl} />} />
  </Routes>
</AppErrorBoundary>

####################

const authorizedStructure = {
  fallbackPath: '/signin',            // when user is not-autheticate then land here
  unAuthorizedComponent: <Error403 />,// when user is autheticate but not authorized then land here
  routes: [                           // all authorized routed goes here
    ...dashBoardConfigs,
    ...appsConfig,
  ],
};

const unAuthorizedStructure = {
  fallbackPath: initialUrl, // first route after login, you can change it as you want
  routes: authRouteConfig,
};

const anonymousStructure = {
  routes: errorPagesConfigs.concat([
    {
      path: '*',
      element: <Navigate to='/error-pages/error-404' />,// setting 404 route
    },
  ]),
};

In case you want manage some routes(page) based on the user role then you need to follow the extra steps as below

To hide/show the menu based on the user role and multiple roles, We need to protect the navigation menu as well as routes. Step 1. To allow access to the navigation menu for a particular user role. you need to go to the src/modules/routesConfig.js file, In this file, we declared all the navigation(route) menus. We want to bind the particular menu with the user role then we assign the role to the route menu.

While we assign a role to the route menu, you have to pass one extra property named "permittedRole" in the menu object in order to make the menu protected based on the user role.

    
    id: 'dashboards',                          // Id of the Menu Group
    title: 'Dashboards',                       // Title of the Menu Group
    messageId: 'sidebar.app.dashboard',        // Localization id of the Menu Group
    type: 'group',  group/collapse/item        // Type of menu of the Menu Group
    permittedRole: RoutePermittedRole.Admin,   // Allowed to visible User Role
    url: '/app/my-profile'                     // path of the menu navigation
    children: []   
      

If you want to assign multiple roles then you need to pass the permittedRole in the array like below.

    id: 'dashboards',                          // Id of the Menu Group
    title: 'Dashboards',                       // Title of the Menu Group
    messageId: 'sidebar.app.dashboard',        // Localization id of the Menu Group
    type: 'group',  group/collapse/item        // Type of menu of the Menu Group
    permittedRole: [RoutePermittedRole.Admin, RoutePermittedRole.Staff],   // Allowed to visible User Role
    url: '/app/my-profile'                     // path of the menu navigation
    children: []    

Step 2. We need to protect the route from unwanted access. To protect the route from unwanted access, we need to add the 'permittedRole' property to the route, this will be protected the route base on the passed permission. Ex in the src/modules/dashboard/index.js file we are protecting the ECommerce page from the unwanted user role

import React from 'react';
import {RoutePermittedRole} from 'shared/constants/AppConst';

const ECommerce = React.lazy(() => import("./ECommerce"));

export const dashBoardConfigs = [
  {
    permittedRole: RoutePermittedRole.User, // pass the role that allows access
    path: '/dashboards/e-commerce',
    element: <ECommerce />,
  },
  ...
];

to allow multiple roles

import React from 'react';
import {RoutePermittedRole} from 'shared/constants/AppConst';

const ECommerce = React.lazy(() => import("./ECommerce"));

export const dashBoardConfigs = [
  {
    permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin], // pass the role that allow to access
    path: '/dashboards/e-commerce',
    element: <ECommerce />,
  },
  ...
];