Crema React
v-3
Search…
⌃K

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 mange some routes(page) based on the user role then you need to follow the some 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 the access of the navigation menu for a particular user role. you need to go 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 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 proctacting 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 allow to 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 />,
},
...
];