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

 更新时间:2023年01月28日 15:40:57   作者:绿胡子大叔  
高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享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实现权限拦截教程详细分析的文章就介绍到这了,更多相关React权限拦截内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React+Mobx基本使用、模块化操作

    React+Mobx基本使用、模块化操作

    React 和 MobX 是一对强力组合,React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染,而MobX提供机制来存储和更新应用状态供 React 使用,这篇文章主要介绍了React+Mobx基本使用、模块化,需要的朋友可以参考下
    2022-09-09
  • Objects are not valid as a React child报错解决

    Objects are not valid as a Rea

    这篇文章主要为大家介绍了Objects are not valid as a React child报错解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 详解react使用react-bootstrap当轮子造车

    详解react使用react-bootstrap当轮子造车

    本篇文章主要介绍了详解react使用react-bootstrap当轮子造车,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • React中路由的参数传递路由的配置文件详解

    React中路由的参数传递路由的配置文件详解

    路由的配置文件目前我们所有的路由定义都是直接使用Route组件,并且添加属性来完成的,路由的参数传递有二种方式这,两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用,本文通过示例代码详解讲解,需要的朋友参考下吧
    2022-11-11
  • react循环数据(列表)的实现

    react循环数据(列表)的实现

    这篇文章主要介绍了react循环数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • create-react-app安装出错问题解决方法

    create-react-app安装出错问题解决方法

    这篇文章主要介绍了create-react-app安装出错问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React初始化渲染过程示例详解

    React初始化渲染过程示例详解

    这篇文章主要为大家介绍了React初始化渲染过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • react国际化化插件react-i18n-auto使用详解

    react国际化化插件react-i18n-auto使用详解

    这篇文章主要介绍了react国际化化插件react-i18n-auto使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 详解操作虚拟dom模拟react视图渲染

    详解操作虚拟dom模拟react视图渲染

    这篇文章主要介绍了详解操作虚拟dom模拟react视图渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • react echarts tree树图搜索展开功能示例详解

    react echarts tree树图搜索展开功能示例详解

    这篇文章主要为大家介绍了react echarts tree树图搜索展开功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论