您好,登录后才能下订单哦!
本篇内容主要讲解“React如何使用高阶组件与Hooks实现权限拦截”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React如何使用高阶组件与Hooks实现权限拦截”吧!
高阶组件是以组件作为参数,返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。
使用HOC
包裹需要权限的页面或组件,并注入唯一的权限签名
用Context
保存全局的权限菜单列表,用Provider
注入异步获取到的权限菜单
在HOC
中用useContext / Consumer
获取权限列表,并和签名做匹配。如果有权限,则展示;没有权限,展示没有权限组件
在文件中创建一个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
,包裹了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') );
import React from 'react' function NoPermission() { return ( <div>对不起,请与管理员获取权限</div> ) } export default NoPermission
/* * 资源路径 ./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实现权限拦截”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。