React使用Context与router实现权限路由详细介绍

 更新时间:2023年01月28日 14:29:01   作者:绿胡子大叔  
这篇文章主要介绍了React使用Context与router实现权限路由的详细过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

前言

之前使用高阶组件和Context实现简单的权限拦截,本篇文章将引入react-router,实现权限路由功能

通过阅读本篇文章,你将了解:

  • 如何在当前示例中使用Context,以及如何通过React Hooks使用Context
  • 创建一个PermissionRoute组件,强化原react-router-dom库中的Route组件
  • 创建一个类似react-router-configrenderRoutes()的函数,实现集中式权限路由配置

思路

  • 创建一个高阶组件包裹根组件,使用高阶组件向根组件注入一个Context。此高阶组件用于保存和获取权限列表
  • 通过与Context中的权限列表进行对比,判断是否有页面访问权限。实现渲染劫持,控制渲染路由组件或重定向组件

实现

向根组件注入权限列表

抽离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实现

/*
 * 资源路径 ./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
  • useState用于动态设置权限列表
  • 组件通过Context.Provider包裹。权限列表改变时,所有Context的消费者组件更新

权限路由组件实现

实现

/*
 * 资源路径 ./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()方法,判断权限列表中是否存在由参数传入的权限值。若存在,则返回响应路由;若不存在,则返回Redirect组件重定向到无权限页面

使用方法

/*
 * 资源路径 ./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>
        );
    }
}

注意: 此处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')
);

实现类似react-router-config的集中式权限路由配置

实现

/*
 * 资源路径 ./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

使用方法

/*
 * 资源路径 ./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>
        );
    }
}

到此这篇关于React使用Context与router实现权限路由详细介绍的文章就介绍到这了,更多相关React权限路由内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 深入React?18源码useMemo?useCallback?memo用法及区别分析

    深入React?18源码useMemo?useCallback?memo用法及区别分析

    这篇文章主要为大家介绍了React?18源码深入分析useMemo?useCallback?memo用法及区别,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 在react中使用vuex的示例代码

    在react中使用vuex的示例代码

    这篇文章主要介绍了在react中使用vuex的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 解析React中useMemo与useCallback的区别

    解析React中useMemo与useCallback的区别

    这篇文章主要介绍了React中useMemo与useCallback的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • React中嵌套组件与被嵌套组件的通信过程

    React中嵌套组件与被嵌套组件的通信过程

    这篇文章主要介绍了React中嵌套组件与被嵌套组件的通信过程,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • React手写一个手风琴组件示例

    React手写一个手风琴组件示例

    这篇文章主要为大家介绍了React手写一个手风琴组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React实现歌词滚动效果(跟随音乐播放时间滚动)

    React实现歌词滚动效果(跟随音乐播放时间滚动)

    这篇文章主要为大家详细介绍了React实现歌词滚动效果(跟随音乐播放使劲按滚动),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2024-02-02
  • react-router-domV6版本改版踩坑记录

    react-router-domV6版本改版踩坑记录

    这篇文章主要介绍了react-router-domV6版本改版踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React组件三大属性之state,props,refs

    React组件三大属性之state,props,refs

    这篇文章主要介绍了React组件三大属性之state,props,refs,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • react-routerV6版本和V5版本的详细对比

    react-routerV6版本和V5版本的详细对比

    React-Router5是React-Router6的前一个版本,它已经被React-Router6取代,React-Router 6是一次较大的重大更新,本文就来介绍一下react-routerV6版本和V5版本的详细对比,感兴趣的可以了解一下
    2023-12-12
  • 详解React中如何拆分组件

    详解React中如何拆分组件

    这篇文章主要为大家详细介绍了React中拆分组件的相关知识,文中的示例代码讲解详细,对我们掌握React有一定的帮助,需要的小伙伴可以参考一下
    2023-12-12

最新评论

?


http://www.vxiaotou.com