导读 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧

高阶组件是以组件作为参数,返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。

思路
  • 使用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实现权限拦截教程详细分析的文章就介绍到这了

https://www.linuxprobe.com/

React使用高阶组件与Hooks实现权限拦截教程的更多相关文章

  1. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  2. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  3. react之高阶组件(二)

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  4. React 之 高阶组件的理解

    1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...

  5. react用高阶组件实现路由守卫

    react-router不像vue-router一样有很多钩子函数,可以做路由守卫.想实现路由守卫,可以用高阶组件来实现. @connect(state => ({ isLogin: state ...

  6. react之高阶组件(一)

    当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...

  7. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  8. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  9. 使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例

    当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件 ...

  10. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

随机推荐

  1. Spring Boot 防止接口被恶意刷新、暴力请求

    ​在实际项目使用中,必须要考虑服务的安全性,当服务部署到互联网以后,就要考虑服务被恶意请求和暴力攻击的情况,下面的教程,通过Spring Boot提供的HandlerInterceptor和Redis ...

  2. Spring(AOP的认识、实现)

    2:Spring AOP AOP (Aspect Oriented Programming) 面向切面编程 OOP(Object Oriented Programming)面向对象编程,用对象的思想来 ...

  3. vue2.x中关于引用图片的问题

    vue中引用图片的几种情况 错误片段一 <!-- template --> <img :src="p" alt="" width=" ...

  4. gitbook使用指南

    一. node 下载 不要去node官网下载,那是最新版的,官方没提供旧版node.如果下载了最新版的还得下载一个管理node版本的工具,很麻烦且没必要. 在这个网站下载node:https://no ...

  5. [IOI2013]robots 机器人

    题目传送门 思路 简单题,设函数 \(f_i\) 表示当时间为 \(i\) 时是否能够收拾好所有玩具,则 \(f_i\) 显然是单调的. 所以我们可以考虑二分. 设我们当前二分到 \(x\),我们先把 ...

  6. JSP 与 Servlet 之间的联系,及其语法

    JSP 是什么 JSP 将 Java 代码和特定变动内容嵌入到静态的页面中,实现以静态页面为模板,动态生成其中的部分内容.JSP 文件在运行时会被其编译器转换成更原始的 Servlet 代码.JSP ...

  7. postgresql VACUUM 不会从表中删除死行的三个原因

    一.为什么是VACUUM? 每当更新或删除PostgreSQL表中的行时,都会留下死元组.VACUUM摆脱了它们,以便空间可以重复使用.如果一个表没有被清理,它就会变得臃肿,这会浪费磁盘空间并减慢表的 ...

  8. Epicor 助力F1车队Scuderia AlphaTauri 提升车队运营效率和性能

    Scuderia AlphaTauri 很高兴地宣布,Epicor 是促进业务增长的行业特定企业软件的全球领导者,已被任命为车队的官方 ERP 合作伙伴.这项多年期协议建立在已经成功的长期技术合作关系 ...

  9. Appium元素选择 滑动 通知栏

    一.根据ID  包名可省略 1.元素的resource id属性 2.唯一标志该元素的值 3.一般最优先根据它来定位 driver.find_element_by_id('io.manong.deve ...

  10. reportviewer的简单使用

    以下通过VS提供的工具来绑定数据源,没有一句自己写的代码. 1.新建web窗体,拖入ScriptManager控件,ReportViewer控件. 2.添加报表,新建数据集.在报表设计页面上拖入控件设 ...