GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → AlanWei → React Acl Router

AlanWei / React Acl Router

Router with Access Control for React Applications

Programming Languages

javascript
184084 projects - #8 most used programming language

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].