Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@mknet/react-acl-router
Advanced tools
Readme
Router with Access Control for React Applications.
yarn add react-acl-router react react-router-dom lodash
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> |
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 | - |
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 | - |
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;
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.FAQs
Router with Access Control for React Applications.
We found that @mknet/react-acl-router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).