react-acl-router

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.