React使用高阶组件与Hooks实现权限拦截教程详细分析
更新时间:2023年1月30日 08:20 点击:732 作者:绿胡子大叔
高阶组件是以组件作为参数,返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。
思路
- 使用
HOC
包裹需要权限的页面或组件,并注入唯一的权限签名 - 用
Context
保存全局的权限菜单列表,用Provider
注入异步获取到的权限菜单 - 在
HOC
中用useContext / Consumer
获取权限列表,并和签名做匹配。如果有权限,则展示;没有权限,展示没有权限组件
实现
注入权限列表
抽离Context
在文件中创建一个context
,并使用export
暴露出对应的Provider,Consumer,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
此处创建一个HOC
,包裹了App组件,实现了向整个页面注入Permission列表
/* * 资源路径 ./src/components/PermissionIndex/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(['edituser','checkorder']) //此处实际为 获取权限列表的请求操作 },[]) //代替了类组件的componenetDidMount生命周期 return ( <PermissionContextProvider value={permission}> <Component {...props}></Component> </PermissionContextProvider> //此处返回了注入权限列表Context的组件 ) } } export default PermissionIndex
useState
用于动态注入获取的权限列表- 组件通过
Context.Provider
包裹。权限列表改变,所有消费权限列表的组件重新更新
向根组件注入权限
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './pages/App/App' import PermissionIndex from './components/PermissionIndex/PermissionIndex' const IndexWithPermission = PermissionIndex(App) ReactDOM.render( <IndexWithPermission/>, document.getElementById('root') );
含有权限拦截功能的HOC
无权限时显示的组件
import React from 'react' function NoPermission() { return ( <div>对不起,请与管理员获取权限</div> ) } export default NoPermission
权限拦截HOC组件
/* * 资源路径 ./src/components/PermissionHOC/PermissionHOC.js */ import React, { useContext } from 'react' import PermissionContext from '../../utils/PermissionContext' import NoPermission from '../NoPermission/NoPermission' function PermissionHoc(authorization) { return function(Component){ return function PermissionIndex(props){ const context = useContext(PermissionContext) //使用useContext获取当前的权限列表,相当于类组件中的contentType静态属性 return context.indexOf(authorization) >= 0 ? <Component {...props}></Component> : <NoPermission></NoPermission> } } } export default PermissionHoc
- 此示例中使用两层包装函数的HOC,第一层用于获取HOC绑定的当前组件的权限签名,因为要用这个权限签名和权限列表做匹配。第二层接受原始组件。
- 在HOC中使用
useContext
接收权限列表,做权限匹配。组件有权限则展示,没有权限则展示无权限组件。
测试
用于测试的组件
/* * 资源路径 ./src/components/PermissionTest/PermissionTest.js */ import React from 'react' function PermissionTest(props) { return ( <div>PermissionTest - {props?.name}</div> ) } export default PermissionTest
在组件中使用权限组件
/* * 资源路径 ./src/components/App/App.js */ import React, { useContext, useEffect, useRef } from 'react' import PermissionContext from '../../utils/PermissionContext' import PermissionHoc from '../../components/PermissionHoc/PermissionHoc' import PermissionTest from '../../components/PermissionTest/PermissionTest' export default function App() { const Edituser = PermissionHoc('edituser')(PermissionTest) const Edituser1 = PermissionHoc('edituser1')(PermissionTest) return ( <div> <Edituser name="edituser"></Edituser> <Edituser1 name="edituser1"></Edituser1> </div> ) }
此处,通过用PermissionHOC
函数处理原始组件,进行了权限拦截功能
到此这篇关于React使用高阶组件与Hooks实现权限拦截教程详细分析的文章就介绍到这了,更多相关React权限拦截内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/m0_52761633/article/details/123493935
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20