Comment on page
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
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.
Last modified 25d ago