React study notes - use Context and react-router v5 to implement authority routing
foreword
Previously, high-level components and Context were used to implement simple permission interception. This article will introduce react-routerand implement the permission routing function
By reading this article, you will understand:
- How to use in the current example
Context, and how toReact HooksuseContext - Create a
PermissionRoutecomponent that enhances the componentsreact-router-domin the original libraryRoute - Create a function like
react-router-configinrenderRoutes()to implement centralized authority routing configuration
train of thought
- Create a higher-order component to wrap the root component, and use the higher-order component to inject one into the root component
Context. This higher-order component is used to save and get permission lists - By
Contextcomparing with the permission list in , determine whether there is a page access permission. Implement rendering hijacking, control rendering routing components or redirecting components
accomplish
Inject permission list to root component
Extract from Context
/*
* 资源路径 ./src/utils/PermissionContext.js
*/
import {
createContext } from "react";
const PermissionContext = createContext()
export const PermissionContextProvider = PermissionContext.Provider
export const PermissionContextConsumer = PermissionContext.Consumer
export default PermissionContext
HOC implementation
/*
* 资源路径 ./src/components/PermissionIndex.js
*/
import React, {
useState, useEffect } from 'react'
import {
PermissionContextProvider } from '../../utils/PermissionContext' // import对应的Context
function PermissionIndex(Component) {
return function Index(props){
const [permission, setpermission] = useState([])
useEffect(()=>{
setpermission(['cart'])
//此处实际为 获取权限列表的请求操作
},[])
//代替了类组件的componenetDidMount生命周期
return (
<PermissionContextProvider value={
permission}>
<Component {
...props}></Component>
</PermissionContextProvider>
//此处返回了注入权限列表Context的组件
)
}
}
export default PermissionIndex
useStateUsed to dynamically set the permission list- Components via
Context.Providerpackages. When the permission list changes, allContextconsumer components are updated
Permission routing component implementation
accomplish
/*
* 资源路径 ./src/components/PermissionRoute.js
*/
import {
useContext} from "react";
import PermissionContext from "../utils/PermissionContext";
import {
Redirect, Route} from "react-router-dom";
function PermissionRoute(props){
const context = useContext(PermissionContext)
return (
context.indexOf(props.permission) > -1 ?
<Route
path={
props.path}
exact={
props.exact}
strict={
props.strict}
sensitive={
props.sensitive}
render={
prop => props.render ? props.render({
...prop}) : <props.component {
...props}/>}
/> :
<Redirect from={
'/props.path'} to={
"/403"}/>
)
}
export default PermissionRoute;
- use
useContextgetPermissionContext - Use
Array.prototype.indexOf()the method to determine whether the permission value passed in by the parameter exists in the permission list. If it exists, return the response route; if it does not exist, returnRedirectthe component to redirect to an unauthorized page
Instructions
/*
* 资源路径 ./src/App.js
*/
import React from 'react';
import {
Redirect, Route, Switch} from 'react-router-dom';
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import Page3 from "./pages/Page3";
import Error from "./pages/Error"; // 无页面时显示的404页面
import PermissionIndex from "./components/PermissionIndex";
import PermissionRoute from "./components/PermissionRoute";
import NoPermission from "./pages/NoPermission"; // 无权限时显示的页面
/*
* 利用es7的decorator实现高阶组件
* 此处等价于：
* class App extends React.Component {
* render(){}
* }
* const App = PermissionIndex(App)
* export default App
*/
@PermissionIndex
export default class App extends React.Component{
render() {
return (
<div>
<Switch>
<Route path={
'/page1'} component={
Page1}/>
<PermissionRoute path={
'/page2'} component={
Page2} permission={
"cart"}/>
<Route path={
'/page3'} component={
Page3}/>
<Route path={
'/404'} component={
Error}/>
<Route path={
'/403'} component={
NoPermission}/>
<Redirect to={
'/404'}/>
</Switch>
</div>
);
}
}
- Note: Here the App component has been wrapped
index.jsbyBrowserRouterthe component in
/*
* 资源路径 ./src/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {
BrowserRouter} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App></App>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Implement centralized authority routing configuration similar to react-router-config
accomplish
/*
* 资源路径 ./src/components/permissionRouterConfig.js
*/
import {
Redirect, Route, Switch} from "react-router-dom";
import React, {
useContext} from "react";
import PermissionContext from "../utils/PermissionContext";
// extraParams 绑定到路由组件的其他参数
// switchParams 绑定到Switch组件的其他参数
function permissionRouterConfig(routes, extraParams = {
}, switchParams = {
}){
// 此处返回一个React组件，但此处不属于高阶组件
return function PRC(){
const context = useContext(PermissionContext)
return routes ? (
<Switch {
...switchParams}>
{
// 遍历传入的routes数组
routes.map((route,index)=>(
/*
* 通过Array.prototype.indexOf() 方法判断权限是否在权限列表中
* 通过withPermission参数判断该路由是否需要进行权限拦截
*/
(context.indexOf(route.permission) > -1 || !route.withPermission) ?
<Route
key={
route.key || index}
path={
route.path}
exact={
route.exact}
sensitive={
route.sensitive}
strict={
route.strict}
render={
props=>route.render?(route.render({
...props, ...extraParams})) : (<route.component {
...props} {
...extraParams}/>)}
/> :
<Redirect from={
route.path} to={
'/403'}/>
// 当权限列表中存在权限或不需要权限拦截时，渲染路由组件；否则渲染重定向组件
))
}
</Switch>
) : null
}
}
export default permissionRouterConfig
Instructions
/*
* 资源路径 ./src/App.js
*/
import React from 'react';
import {
Redirect, Route, Switch} from 'react-router-dom';
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import Page3 from "./pages/Page3";
import Error from "./pages/Error";
import PermissionIndex from "./components/PermissionIndex";
import NoPermission from "./pages/NoPermission";
import permissionRouterConfig from "./components/permissionRouterConfig";
const routes = [{
path: '/page1',
component: Page1,
withPermission: true, // withPermission为true，启用权限拦截
permission: "cart" // 访问该页面所需的权限名
},{
path: '/page2',
render: props=><Page2 {
...props}></Page2>
},{
path: '/page3',
component: Page3,
withPermission: false // withPermission为false或undefined,不启用权限拦截
},{
path: '/404',
component: Error
},{
path: '/403',
component: NoPermission
},{
path: '/',
render: ()=><Redirect to={
'/404'}/>
}]
const PermissionRouter = permissionRouterConfig(routes)
// 传入routes规则，返回一个包含Switch和Route的组件
@PermissionIndex
export default class App extends React.Component{
render() {
return (
<div>
<PermissionRouter/>
</div>
);
}
}