react-auth-router-config is an extension for react-router-config which helps you authenticating access to specific routes.
- generate routes based on your own auth policy
- customize your own no-permission component/render
- matchRoutes depends on your own auth policy;
npm install react-auth-config-router
import React from 'react'
import { render } from 'react-dom';
import { BrowserRouter, Link } from "react-router-dom";
import {
authMatchRoutes,
authCallbackMatchRoutes,
authRenderRoutes,
authCallbackRenderRoutes } from 'react-auth-config-router';
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
component: Home
},
{
path: "/child/:id",
component: Child,
routes: [
{
path: "/child/:id/grand-child-render",
exact: true,
render: () => <div>Grand Child Render</div>
}
]
}
]
}
];
render(
<BrowserRouter>
{authRenderRoutes(routes, true)}
</BrowserRouter>,
document.getElementById('root'));
authRenderRoutes(routes, hasPermission, forbiddenPage, extraProps, switchProps)
- routes
the route configuration
Note:
auth router config provides a route attributenoAuth
, which helps you ignorehasPermission
authenticating.
routes config demo as below, andpath: "/test/:id"
will be out ofhasPermission
authenticating(it means the path has permission).
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
permissions: [],
component: Home
},
{
path: "/test/:id",
component: Child,
noAuth: true,
routes: [
{
path: "/test/:id/test-child",
component: GrandChild
}
]
},
{
path: "/child/:id",
component: Child,
routes: [
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
];
- hasPermission
this is a global param to control whether a route component/render should be presented. - forbiddenPage
if a route has no permission, the forbiddenPage would be presented.
forbiddenPage
could be functional component or class component.
Default:
const ForbiddenPage = () => (
<div>
<h3>403 Forbidden!</h3>
</div>
);
- extraProps
Default:{}
- switchProps
Default:{}
authCallbackRenderRoutes(routes, authCallback, forbiddenPage, extraProps, switchProps)
all params are same as authRenderRoutes
except authCallback
.
- authCallback
we provide a route attributepermissions
to authenticating, andpermissions
will be passed to the callback functionauthCallback
.
Note:
authCallback
must be synchronous;
if you do not pass any callback function and it means all routes has permission;
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
permissions: [],
component: Home
},
{
path: "/test/:id",
component: Child,
permissions: ['test'],
routes: [
{
path: "/test/:id/test-child",
component: GrandChild
}
]
},
{
path: "/child/:id",
component: Child,
permissions: ['master'],
routes: [
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
];
function authCallback(permissions) {
return permissions.includes('master');
}
authMatchRoutes(hasPermission, routes, pathname, branch)
all params are same as matchRoutes of react-router-config except hasPermission
;
- hasPermission
it is same as the paramhasPermission
ofauthRenderRoutes
.
you could go to basic demo for details.
authCallbackMatchRoutes(authCallback, routes, pathname, branch)
all params are same as matchRoutes of react-router-config except authCallback
;
- authCallback
it is same as the paramhasPermission
ofauthCallbackRenderRoutes
.
you could go to basic demo for details.
Note:
authCallback
must be synchronous;
if you do not pass any callback function and it means all routes has permission;