React使用Context与router实现权限路由详细介绍
短信预约 -IT技能 免费直播动态提醒
前言
之前使用高阶组件和Context实现简单的权限拦截，本篇文章将引入react-router，实现权限路由功能
通过阅读本篇文章，你将了解：
- 如何在当前示例中使用
Context，以及如何通过React Hooks使用Context - 创建一个
PermissionRoute组件，强化原react-router-dom库中的Route组件 - 创建一个类似
react-router-config中renderRoutes()的函数，实现集中式权限路由配置
思路
- 创建一个高阶组件包裹根组件，使用高阶组件向根组件注入一个
Context。此高阶组件用于保存和获取权限列表 - 通过与
Context中的权限列表进行对比，判断是否有页面访问权限。实现渲染劫持，控制渲染路由组件或重定向组件
实现
向根组件注入权限列表
抽离Context
import { createContext } from "react";
const PermissionContext = createContext()
export const PermissionContextProvider = PermissionContext.Provider
export const PermissionContextConsumer = PermissionContext.Consumer
export default PermissionContext
HOC实现
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
useState用于动态设置权限列表- 组件通过
Context.Provider包裹。权限列表改变时，所有Context的消费者组件更新
权限路由组件实现
实现
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;
- 使用
useContext获取PermissionContext - 利用
Array.prototype.indexOf()方法，判断权限列表中是否存在由参数传入的权限值。若存在，则返回响应路由；若不存在，则返回Redirect组件重定向到无权限页面
使用方法
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"; // 无权限时显示的页面
@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>
);
}
}
注意： 此处App组件已在index.js中被BrowserRouter组件包裹
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')
);
实现类似react-router-config的集中式权限路由配置
实现
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)=>(
(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
使用方法
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>
);
}
}
到此这篇关于React使用Context与router实现权限路由详细介绍的文章就介绍到这了,更多相关React权限路由内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
