React使用高阶组件与Hooks实现权限拦截教程详细分析.docxVIP

第

React使用高阶组件与Hooks实现权限拦截教程详细分析

目录思路实现注入权限列表抽离Context向页面注入权限列表的HOC向根组件注入权限含有权限拦截功能的HOC无权限时显示的组件权限拦截HOC组件测试用于测试的组件在组件中使用权限组件高阶组件是以组件作为参数，返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。

思路

使用HOC包裹需要权限的页面或组件，并注入唯一的权限签名用Context保存全局的权限菜单列表，用Provider注入异步获取到的权限菜单在HOC中用useContext/Consumer获取权限列表，并和签名做匹配。如果有权限，则展示；没有权限，展示没有权限组件

实现

注入权限列表

抽离Context

在文件中创建一个context，并使用export暴露出对应的Provider，Consumer，Context

/*

*资源路径./src/utils/PermissionContext.js

import{createContext}fromreact;

constPermissionContext=createContext()

exportconstPermissionContextProvider=PermissionContext.Provider

exportconstPermissionContextConsumer=PermissionContext.Consumer

exportdefaultPermissionContext

向页面注入权限列表的HOC

此处创建一个HOC，包裹了App组件，实现了向整个页面注入Permission列表

/*

*资源路径./src/components/PermissionIndex/PermissionIndex.js

importReact,{useState,useEffect}fromreact

import{PermissionContextProvider}from../../utils/PermissionContext//import对应的Context

functionPermissionIndex(Component){

returnfunctionIndex(props){

const[permission,setpermission]=useState([])

useEffect(()={

setpermission([edituser,checkorder])

//此处实际为获取权限列表的请求操作

},[])

//代替了类组件的componenetDidMount生命周期

return(

PermissionContextProvidervalue={permission}

Component{...props}/Component

/PermissionContextProvider

//此处返回了注入权限列表Context的组件

exportdefaultPermissionIndex

useState用于动态注入获取的权限列表组件通过Context.Provider包裹。权限列表改变，所有消费权限列表的组件重新更新

向根组件注入权限

importReactfromreact;

importReactDOMfromreact-dom;

import./index.css;

importAppfrom./pages/App/App

importPermissionIndexfrom./components/PermissionIndex/PermissionIndex

constIndexWithPermission=PermissionIndex(App)

ReactDOM.render(

IndexWithPermission/,

document.getElementById(root)

含有权限拦截功能的HOC

无权限时显示的组件

importReactfromreact

functionNoPermission(){

return(

div对不起，请与管理员获取权限/div

exportdefaultNoPermission

权限拦截HOC组件

/*

*资源路径./src/compon