在react项目中实现按钮权限createContext && useContext

在react项目中实现按钮权限

首先，这里是使用Context来实现的，我们知道Context可以实现值传递给子孙组件，我们可以利用这个特性来实现，当然实现按钮权限级别的方法是有很多的，我这里只是在自己小项目中使用到了，所以简单总结一下，方便之后使用或者分享给大家。

1、createContext && useContext的基本使用

使用Context我们可以实现父组件向孙组件传递参数的问题，无论是属性还是callback。
也可以配合上面的useRecuder来实现孙组件更新父组件中state中的状态，只要孙组件拿到父组件中的dispatch就可以出发action，使父组件重新render。

首先我们可以选择再一个单独的js中创建一个Context

export const myName='六卿'
export const myCreateContext= React.createContext();

在父组件中引入这个js，使用解构赋值的形式拿到myName、myCreateContext：

import {myName,myCreateContext} from './xxx.js'

在render中使用：

<myCreateContext.Provider value={myName}>
      <子组件 />
</myCreateContext.Provider>

这个时候我们成功的将myName传入后代组件，无论是子组件还是孙组件；
在子组件或者孙组件中同样也引入xxx.js
在子组件或者孙组件中使用useContext这个hook来接收来自父组件中的数据；

const myName= useContext(myCreateContext);

这个时候我们就可以直接使用myName的值了。

2、使用Context实现功能

2.1、新建一个js，用来存新建的context和对应的按钮权限方法

import React, { useContext } from 'react'
export const myCreateContext = React.createContext()

// btnList 为 按钮权限字符串
export const isShowBtnFun = str => {
    if (!str) return false
    // 这里的btnList是当前登录用户，获取到用户信息中按钮权限的list，每一项为一个权限按钮的标识，这个和后端协商好就行 他可以是 数字 字符串
    const arr = (myCreateContext && useContext(myCreateContext) && useContext(myCreateContext).btnList) || []
    return arr.includes(str)
}

2.2、在app.js中引用使用一下

import { myCreateContext } from '@/components/context'

const [userInfoObj, setUserInfoObj] = useState({})


<myCreateContext.Provider value={userInfoObj}>
	《子组件...》
</myCreateContext.Provider>

setUserInfoObj在从登录页面过来之后，就可以将整个信息赋值到setUserInfoObj，我这里需要的结构为：

userInfoObj = {
	...其他信息,
	btnList:[]
}

2.3、在任意子组件中使用

我这里呢，封装了一下table组件，在有时候table是需要下载表格数据的，但是有的需要控制部分角色只能看不能导出，所以，设置了一个flag,来控制是否显示下载的按钮图标，这个时候可以使用到上述isShowBtnFun方法，判断是否显示下载按钮。

import { isShowBtnFun } from '@/components/context'

<TableLiuQing
    Props={{
        downBoolean: isShowBtnFun('/AAADownLoad'),
        exportFun,
        title: 'AAA列表',
    }}
/>

好了，就是这么个流程，只要就是使用了context，有其他方法比如使用本地缓存、状态管理、或者创建一个全局的对象等等都可以，就这样。