快捷導(dǎo)航

React使用Context與router實現(xiàn)權(quán)限路由詳細介紹

更新時間：2023年01月28日 14:29:01 作者：綠胡子大叔

這篇文章主要介紹了React使用Context與router實現(xiàn)權(quán)限路由的詳細過程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

前言

之前使用高階組件和Context實現(xiàn)簡單的權(quán)限攔截，本篇文章將引入react-router，實現(xiàn)權(quán)限路由功能

通過閱讀本篇文章，你將了解：

如何在當前示例中使用Context，以及如何通過React Hooks使用Context
創(chuàng)建一個PermissionRoute組件，強化原react-router-dom庫中的Route組件
創(chuàng)建一個類似react-router-config中renderRoutes()的函數(shù)，實現(xiàn)集中式權(quán)限路由配置

思路

創(chuàng)建一個高階組件包裹根組件，使用高階組件向根組件注入一個Context。此高階組件用于保存和獲取權(quán)限列表
通過與Context中的權(quán)限列表進行對比，判斷是否有頁面訪問權(quán)限。實現(xiàn)渲染劫持，控制渲染路由組件或重定向組件

實現(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實現(xiàn)

/*
 * 資源路徑 ./src/components/PermissionIndex.js
 */
import React, { useState, useEffect } from 'react'
import { PermissionContextProvider } from '../../utils/PermissionContext' // import對應(yīng)的Context
function PermissionIndex(Component) {
  return function Index(props){
    const [permission, setpermission] = useState([])
    useEffect(()=>{
		setpermission(['cart'])
		//此處實際為 獲取權(quán)限列表的請求操作
	},[])
	//代替了類組件的componenetDidMount生命周期
    return (
      <PermissionContextProvider value={permission}>
        <Component {...props}></Component>
      </PermissionContextProvider>
      //此處返回了注入權(quán)限列表Context的組件
    )
  }
}
export default PermissionIndex

useState用于動態(tài)設(shè)置權(quán)限列表
組件通過Context.Provider包裹。權(quán)限列表改變時，所有Context的消費者組件更新

權(quán)限路由組件實現(xiàn)

實現(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"; // 無頁面時顯示的404頁面
import PermissionIndex from "./components/PermissionIndex";
import PermissionRoute from "./components/PermissionRoute";
import NoPermission from "./pages/NoPermission"; // 無權(quán)限時顯示的頁面
/*
 * 利用es7的decorator實現(xiàn)高階組件
 * 此處等價于：
 * 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')
);

實現(xiàn)類似react-router-config的集中式權(quán)限路由配置

實現(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 = {}){
    // 此處返回一個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ù)判斷該路由是否需要進行權(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'}/>
                        // 當權(quán)限列表中存在權(quán)限或不需要權(quán)限攔截時，渲染路由組件；否則渲染重定向組件
                    ))
                }
            </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ī)則，返回一個包含Switch和Route的組件
@PermissionIndex
export default class App extends React.Component{
    render() {
        return (
            <div>
                <PermissionRouter/>
            </div>
        );
    }
}

到此這篇關(guān)于React使用Context與router實現(xiàn)權(quán)限路由詳細介紹的文章就介紹到這了,更多相關(guān)React權(quán)限路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: