/react-acl-router

Router with Access Control for React Applications

Primary LanguageJavaScript

react-acl-router

npm v npm dm

Router with Access Control for React Applications.

Installation

yarn add react-acl-router react react-router-dom lodash

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) -
component route's component function -
unauthorized unauthorized view component if authorities don't have permission string -
redirect redirect path if authorities don't have permission string -

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 BasicLayout from 'layouts/BasicLayout';
import NormalLayout from 'layouts/NormalLayout';
import Login from 'views/login';
import WorkInProgress from 'views/workInProgress';
import Unauthorized from 'views/unauthorized';

const authorizedRoutes = [{
  path: '/dashboard/analysis/realtime',
  exact: true,
  permissions: ['admin', 'user'],
  redirect: '/login',
  component: WorkInProgress,
}, {
  path: '/dashboard/analysis/offline',
  exact: true,
  permissions: ['admin', 'user'],
  redirect: '/login',
  component: WorkInProgress,
}, {
  path: '/dashboard/workplace',
  exact: true,
  permissions: ['admin', 'user'],
  redirect: '/login',
  component: WorkInProgress,
}, {
  path: '/exception/403',
  exact: true,
  permissions: ['god'],
  component: WorkInProgress,
  unauthorized: Unauthorized,
}];

const normalRoutes = [{
  path: '/',
  exact: true,
  redirect: '/dashboard/analysis/realtime',
}, {
  path: '/login',
  exact: true,
  component: Login,
}];

const Router = (props) => (
  <AclRouter
    // sync user authorities with the user data in your application
    authorities={props.user.authorities}
    authorizedRoutes={authorizedRoutes}
    authorizedLayout={BasicLayout}
    normalRoutes={unAuthorizedRoutes}
    normalLayout={NormalLayout}
    notFound={() => <div>Page Not Found</div>}
  />
);

export default Router;

Notes

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