React使用Context與router實(shí)現(xiàn)權(quán)限路由詳細(xì)介紹
更新時(shí)間：2023年01月28日 14:29:01 作者：綠胡子大叔
這篇文章主要介紹了React使用Context與router實(shí)現(xiàn)權(quán)限路由的詳細(xì)過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
前言
之前使用高階組件和Context實(shí)現(xiàn)簡(jiǎn)單的權(quán)限攔截，本篇文章將引入react-router，實(shí)現(xiàn)權(quán)限路由功能
通過閱讀本篇文章，你將了解：
- 如何在當(dāng)前示例中使用
Context，以及如何通過React Hooks使用Context - 創(chuàng)建一個(gè)
PermissionRoute組件，強(qiáng)化原react-router-dom庫(kù)中的Route組件 - 創(chuàng)建一個(gè)類似
react-router-config中renderRoutes()的函數(shù)，實(shí)現(xiàn)集中式權(quán)限路由配置
思路
- 創(chuàng)建一個(gè)高階組件包裹根組件，使用高階組件向根組件注入一個(gè)
Context。此高階組件用于保存和獲取權(quán)限列表 - 通過與
Context中的權(quán)限列表進(jìn)行對(duì)比，判斷是否有頁面訪問權(quán)限。實(shí)現(xiàn)渲染劫持，控制渲染路由組件或重定向組件
實(shí)現(xiàn)
向根組件注入權(quán)限列表
抽離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實(shí)現(xiàn)
/*
* 資源路徑 ./src/components/PermissionIndex.js
*/
import React, { useState, useEffect } from 'react'
import { PermissionContextProvider } from '../../utils/PermissionContext' // import對(duì)應(yīng)的Context
function PermissionIndex(Component) {
return function Index(props){
const [permission, setpermission] = useState([])
useEffect(()=>{
setpermission(['cart'])
//此處實(shí)際為 獲取權(quán)限列表的請(qǐng)求操作
},[])
//代替了類組件的componenetDidMount生命周期
return (
<PermissionContextProvider value={permission}>
<Component {...props}></Component>
</PermissionContextProvider>
//此處返回了注入權(quán)限列表Context的組件
)
}
}
export default PermissionIndex
useState用于動(dòng)態(tài)設(shè)置權(quán)限列表- 組件通過
Context.Provider包裹。權(quán)限列表改變時(shí)，所有Context的消費(fèi)者組件更新
權(quán)限路由組件實(shí)現(xiàn)
實(shí)現(xiàn)
/*
* 資源路徑 ./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;
- 使用
useContext獲取PermissionContext - 利用
Array.prototype.indexOf()方法，判斷權(quán)限列表中是否存在由參數(shù)傳入的權(quán)限值。若存在，則返回響應(yīng)路由；若不存在，則返回Redirect組件重定向到無權(quán)限頁面
使用方法
/*
* 資源路徑 ./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"; // 無頁面時(shí)顯示的404頁面
import PermissionIndex from "./components/PermissionIndex";
import PermissionRoute from "./components/PermissionRoute";
import NoPermission from "./pages/NoPermission"; // 無權(quán)限時(shí)顯示的頁面
/*
* 利用es7的decorator實(shí)現(xiàn)高階組件
* 此處等價(jià)于：
* 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>
);
}
}
注意： 此處App組件已在index.js中被BrowserRouter組件包裹
/*
* 資源路徑 ./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')
);
實(shí)現(xiàn)類似react-router-config的集中式權(quán)限路由配置
實(shí)現(xiàn)
/*
* 資源路徑 ./src/components/permissionRouterConfig.js
*/
import {Redirect, Route, Switch} from "react-router-dom";
import React, {useContext} from "react";
import PermissionContext from "../utils/PermissionContext";
// extraParams 綁定到路由組件的其他參數(shù)
// switchParams 綁定到Switch組件的其他參數(shù)
function permissionRouterConfig(routes, extraParams = {}, switchParams = {}){
// 此處返回一個(gè)React組件，但此處不屬于高階組件
return function PRC(){
const context = useContext(PermissionContext)
return routes ? (
<Switch {...switchParams}>
{
// 遍歷傳入的routes數(shù)組
routes.map((route,index)=>(
/*
* 通過Array.prototype.indexOf() 方法判斷權(quán)限是否在權(quán)限列表中
* 通過withPermission參數(shù)判斷該路由是否需要進(jìn)行權(quán)限攔截
*/
(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'}/>
// 當(dāng)權(quán)限列表中存在權(quán)限或不需要權(quán)限攔截時(shí)，渲染路由組件；否則渲染重定向組件
))
}
</Switch>
) : null
}
}
export default permissionRouterConfig
使用方法
/*
* 資源路徑 ./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，啟用權(quán)限攔截
permission: "cart" // 訪問該頁面所需的權(quán)限名
},{
path: '/page2',
render: props=><Page2 {...props}></Page2>
},{
path: '/page3',
component: Page3,
withPermission: false // withPermission為false或undefined,不啟用權(quán)限攔截
},{
path: '/404',
component: Error
},{
path: '/403',
component: NoPermission
},{
path: '/',
render: ()=><Redirect to={'/404'}/>
}]
const PermissionRouter = permissionRouterConfig(routes)
// 傳入routes規(guī)則，返回一個(gè)包含Switch和Route的組件
@PermissionIndex
export default class App extends React.Component{
render() {
return (
<div>
<PermissionRouter/>
</div>
);
}
}
到此這篇關(guān)于React使用Context與router實(shí)現(xiàn)權(quán)限路由詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React權(quán)限路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中引入CSS高階用法的方案詳解,至于使用react用哪種方案引入css,并沒有一個(gè)絕對(duì)的答案,可以根據(jù)各自情況選擇合適的方案,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了快速搭建React的步驟詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
使用React Profiler進(jìn)行性能優(yōu)化方案詳解
在現(xiàn)代前端開發(fā)中,性能優(yōu)化是一個(gè)不可忽視的重要環(huán)節(jié),在 React 生態(tài)系統(tǒng)中,React Profiler 是一個(gè)強(qiáng)大的工具,下面我們來看看如何使用它來提升我們的 React 應(yīng)用吧2025-03-03
如何對(duì)react hooks進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了如何對(duì)react hooks進(jìn)行單元測(cè)試的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例
這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
React onClick/onChange傳參(bind綁定)問題
這篇文章主要介紹了React onClick/onChange傳參(bind綁定)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本篇文章主要介紹了React實(shí)踐之Tree組件的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了關(guān)于react中列表渲染的局部刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
快速創(chuàng)建React項(xiàng)目并配置webpack
這篇文章主要介紹了創(chuàng)建React項(xiàng)目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01
React?Native集成支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實(shí)現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下2022-02-02