Route Management

Route protection means, protecting any route from unauthorized access.

Route protection means, protecting any route from public access. For example, sign-in 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 routes. In Crema, we have provided the functionality of route protection.

Mainly in Crema, we have three different types of route structures as below described

Authorized Route: In this type of structure, we mainly add the authenticated routes that can be accessed based on the authentication of a particular role of the user or any role of the authenticated user. We have a key named "fallbackPath" for this structure. It takes a URL. This "fallbackPath" key is used to redirect the user to this path/URL in case the user is not authenticated or not logged in. We have another key named "unAuthorizedComponent" for this structure. It takes a component, we use this component to show it to the user if the user is not satisfied with the authorization condition of the route.
```
const authorizedStructure = {
  fallbackPath: '/signin',
  unAuthorizedComponent: <Error403 />,
  routes: [
    ...accountPagesConfigs,
    ....
  ]
}
```
Public Route: In this type of structure, we mainly add the auth routes of the user. like signin, signup and forgot password
```
const publicdStructure = {
  fallbackPath: initialUrl,
  routes: authRouteConfig,
};
```

Anonymous Route In this category, general-purpose pages come. these page doesn't belong to the user's authorization state. like 404, 500, maintenance, coming soon etc

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

Using the above three types of routes we will manage the crema hole routing system like below. By using these three types of routes structure we will generate the route dynamically

// Route Generator Sample

import { useRoutes } from 'react-router-dom';
import { useAuthUser } from '@crema/hooks/AuthHooks';
import generateRoutes from '@crema/helpers/RouteGenerator';


  const { user, isAuthenticated } = useAuthUser();
  const generatedRoutes = generateRoutes({
    isAuthenticated: isAuthenticated,
    userRole: user?.role,
    publicStructure,
    authorizedStructure,
    anonymousStructure,
  });

  const routes = useRoutes(generatedRoutes);// this will return the routes array

Create a new route

To create a new route, We need to follow two steps as below. For example, we are adding a new page named Sample Page with the url "/sample-page" Step 1. (Add Sidebar Menu): To allow access to the navigation menu for a particular user role. you need to go to the src/@crema/core/AppRoutes/routeConfig.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.

Don't need to add those routes in this config file that don't belong to the left sidebar

//Any user can access this menu
const routesConfig = [
   ...,
   {
     id: 'sample-page',                             // Id of the Menu
     title: 'Sample Page',                          // Title of the Menu 
     messageId: 'sidebar.pages.samplePage',         // Locale id of the Menu
     type: 'item',                                  // Type of menu of the Menu 
     icon: <ANY_SAMPLE_ICON/>,                      // Icon of the menu navigation
     url: '/sample-page',                           // Path of the menu navigation
   },
   ...
 ]



//The user has Staff level permission can access this menu
const routesConfig = [
   ...,
   {
     id: 'sample-page',                          // Id of the Menu
     title: 'Sample Page',                        // Title of the Menu 
     messageId: 'sidebar.pages.samplePage',       // Locale id of the Menu
     type: 'item',                               // Type of menu of the Menu 
     permittedRole: RoutePermittedRole.Staff      // Permitted user roles of the Menu
     icon: <ANY_SAMPLE_ICON/>,                    // Icon of the menu navigation
     url: '/sample-page',                          // Path of the menu navigation
   },
   ...
 ]
   

///The user has Staff and Admin level permission can access this menu
  
const routesConfig = [
    ...,
    {
     id: 'sample-page',                           // Id of the Menu
     title: 'Sample Page',                        // Title of the Menu 
     messageId: 'sidebar.pages.samplePage',       // Locale id of the Menu
     type: 'item',                                // Type of menu of the Menu 
     permittedRole: [                             // Permitted user roles of the Menu
        RoutePermittedRole.Staff,                 // This is an optional property
        RoutePermittedRole.Admin
        ], //
     icon: <ANY_SAMPLE_ICON/>,                    // Icon of the menu navigation
     url: '/sample-page',                         // Path of the menu navigation
   },   
   ...
]

Step 2. (Add new Route): We need to create a new Sample Route Configuration file in the src/@crema/core/AppRoutess/ directory like SampleRoutes.js

To protect the route from unwanted access, we need to add the 'permittedRole' property to the route, this will protect the route based on the user's roles. Ex in the below code snips, We are assigning three different types of access to the route.

//src/@crema/core/AppRoutess/SampleRoutes.js

import React from 'react';
import { RoutePermittedRole } from '@crema/constants/AppEnums';
import SamplePage from '../../modules/SamplePage'; //This will be created in step-3

//Non-restricted routes any User can access it
export const samplePagesConfigs = [// No need to pass permittedRole for public routes
  {
    path: '/sample-page',
    element: <SamplePage/>,
  },
];


//Restricted routes allowed for user's Staff role only
export const samplePagesConfigs  = [
  {
    permittedRole: RoutePermittedRole.Staff,
    path: '/sample-page',
    element: <SamplePage/>,
  },
];

//Restricted routes allowed for the multiple roles of user's like Admin and Staff 
export const samplePagesConfigs = [
  {
    permittedRole: [RoutePermittedRole.Admin, RoutePermittedRole.Staff],
    path: '/sample-page',
    element: <SamplePage/>,
  },
];

In the last, we need to link this route to our "routesStructure" It can be linked to anyone as you want, In this example we are adding our new route to the "authorizedStructure" like below in the src/@crema/core/AppRoutes/index.js file

...
import {samplePagesConfigs} from './SampleRoutes';

export const authorizedStructure = (loginUrl) => {
  return {
    fallbackPath: loginUrl,
    unAuthorizedComponent: <Error403 />,
    routes: [
      ...,
      ...samplePagesConfigs           // Add our new route here
    ],
  };
};

Step 3. (Link with new Route): In this last step you need to create your page(Sample Page) and link that with the newly created routes. To create a new page, we need to go into the modules directory and create a new directory named SamplePage and its index file with the following code.

// Some code moduled/SamplePage/index.js
import React from 'react';

const SamplePage = () => {
    return (
        <div>
          SamplePage
        </div>
    );
};

export default SamplePage;

All Done! You can create any routes by following the above few simple steps.

Last updated 1 year ago