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

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 file in our desired route group. we are creating it in(protected) group. On this path like belowsrc/app/(protected)/sample-page/page.js

//src/app/(protected)/sample-page/page.js
import React from 'react';
import SamplePage from '../modules/SamplePage';

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

export default Page;

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.

// src/modules/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.