Route Overview

Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are common paths/unrestricted paths and any user can access them. However there are many paths or pages that only logged-in users can access, those paths are called Protected Routes. In Hipster, we have provided the functionality of route protection, you have to follow the following steps to protect the route:- Step 1. To hide/show the menu based on the user role, We need to protect the navigation menu as well as routes. To protect the navigation menu go to the src/modules/routesConfig.js file, In this file, we declared all the navigation(route) menus. We want to bind the menu with the auth role of the user. then we assign the role to the route menu.

While defining the route menu, you have to pass one extra property named "permittedRole" in the menu object in order to make the menu protected 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,   // Allowed to visible User Role
    url: '/app/my-profile'                     // path of the menu navigation
    children: []     

We can 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, this route will be protected and need particular role access to access it and if this property is not passed, then this path is directly accessible without any condition. Ex in the src/modules/dashboard/index.js file we are proctacting all the dashboard from the un-authenticated user

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

export const dashBoardConfigs = [
  {
    permittedRole: RoutePermittedRole.user, // pass the role that allow to access
    path: '/dashboards/e-commerce',
    component: React.lazy(() => import('./ECommerce')),
  },
  ...
];

While declaring the route, you have to pass one extra property named "permittedRole" in the route object in order to make the route protected.

If this 'permittedRole' property is added, this route will be protected and requires a logged-in user to access this path and fulfill the required role and if this property is not passed, then this path is directly accessible without any condition. We can pass the permittedRole in the array like below.

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

export const dashBoardConfigs = [
  {
    permittedRole: [RoutePermittedRole.user, RoutePermittedRole.admin], // pass the role that allow to access
    path: '/dashboards/e-commerce',
    component: React.lazy(() => import('./ECommerce')),
  },
  ...
];