Router with Access Control for React Applications

Installation

yarn add react-acl-router react react-router-dom lodashCopy the code

Usage

AclRouter

Property Description Type Default
authorities permissions of current user OneOfType([string, array, func]) ‘ ‘
authorizedRoutes array of routes needs permissions arrayOf(AuthorizedRoute) []
authorizedLayout container of all authorized routes function <div>{props.children}</div>
normalRoutes array of routes don’t need permissions arrayOf(NormalRoute) []
normalLayout container of all routes don’t need permissions function <div>{props.children}</div>
notFound element to show when route doesn’t match function <div>404</div>

AuthorizedRoute

with all react-router <Route /> supported props except render because react-acl-router will overwrite the render prop.

Property Description Type Default
path route’s full path string –
permissions array of roles which have permission like [‘god’, ‘admin’ ] arrayOf(string) –
redirect redirect path if authorities don’t have permission string –
component route’s component function –

NormalRoute (with react-router Route’s all supported props)

with all react-router <Route /> supported props except render because react-acl-router will overwrite the render prop.

Property Description Type Default
path route’s full path string –
redirect redirect route path to other route string –
component route’s component function –

Example

import AclRouter from 'react-acl-router'; import NormalLayout from 'layouts/NormalLayout'; import Login from 'views/login'; import Home from 'views/home'; import Analysis from 'views/analysis'; const authorizedRoutes = [{ path: '/dashboard/analysis/realtime', exact: true, permissions: ['admin', 'user'], redirect: '/login', component: Analysis, }, { path: '/dashboard/analysis/offline', exact: true, permissions: ['admin', 'user'], redirect: '/login', component: Analysis, }, { path: '/dashboard/monitor', exact: true, permissions: ['admin', 'user'], redirect: '/login', component: Analysis, }, { path: '/dashboard/workplace', exact: true, permissions: ['admin', 'user'], redirect: '/login', component: Analysis, }, { path: '/marketing', exact: true, permissions: ['admin', 'user'], redirect: '/login', component: Home, }, { path: '/settings/users', exact: true, permissions: ['admin', 'user'], redirect: '/login', component: Home, }]; const normalRoutes = [{ path: '/', exact: true, redirect: '/dashboard/analysis/realtime', }, { path: '/login', exact: true, component: Login, }]; // passing extra props to layout via HOC const BasicLayoutWrapper = props => ( <BasicLayout {... props} appName={appName} menuData={menuData} > {props.children} </BasicLayout> ); <AclRouter // sync user authorities with the user data in your application authorities={this.props.app.user.authorities}  authorizedRoutes={authorizedRoutes} authorizedLayout={BasicLayoutWrapper} normalRoutes={normalRoutes} normalLayout={NormalLayout} notFound={() => <div>Page Not Found</div>} />Copy the code

Notes

  • For normal route, redirect and component are exclusive since normally you won’t redirect the user to another path while you have a valid component to render.