react 高阶组件实现按钮权限显示与隐藏实现

image.png

一些管理端通过不同权限对按钮进行控制与隐藏,这个功能很普遍吧。自己记录一下自己在react端的实现方式-主要使用高阶组件方式；

代码如下:

import React from 'react';
import PropTypes from 'prop-types'

/**
 * 校验当前用户是否有功能编码对应的权限
 * @param {string} functionName
 */
export function checkAuth(functionName, menuId) {
  if (functionName) {
    let functionsList; //[{menuId:0,btnCode:"add"},{menuId:2,btnCode:"del"}]
    if (sessionStorage.getItem('permissionsButtonList')) {
      functionsList = JSON.parse(sessionStorage.getItem('permissionsButtonList');)
    } else {
      return false;
    }
    //这边有一个菜单ID-主要是为了兼容复用同一个组件情况
    if (menuId) {
      functionsList = functionsList.filter((item) => {
        return item.menuId == menuId
      })
    }
  
    const functions = functionName.split(',');
    const flag = functions.some((value) =>
      functionsList.some((func) => func.buttonCode == value.trim())
    );
    return flag;
  } else {
    return false;
  }
}


/**
 * 权限组件封装
 */
export class AuthWrapper extends React.Component {
  render() {
    return checkAuth(this.props.functionName, this.props.menuId) && this.props.children;
  }
}

AuthWrapper.propTypes = {
  functionName: PropTypes.string,
  menuId: PropTypes.string,
}

使用方式:

  <AuthWrapper functionName='权限按钮唯一标识'>
      <Button>添加</Button>
  </AuthWrapper>

TIPS: 这个写的是前端的的实现思路 可能后台数据返回各不相同-思想仅供参考(为了小白能看明白 写一下)

• 后台获取到按钮权限的数据,放置到sessionStorage,当然存放地方自己决定

//数据结构大致这样
[{menuId:0,btnCode:"0_add"},{menuId:0,btnCode:"0_del"},{menuId:0,btnCode:"0_edit"},{menuId:1,btnCode:"1_add"}]

当然咯 这是我们这边返回的数据接口是这样的。每个按钮也有唯一的BtnCode

• functionName 就是按钮权限的唯一标识了，第二个代码块里面写的内容。当然如果一个按钮拥有多个权限的时候。可以传入多个权限标识符，使用,分割即可；functionName.split(','); 就是这个代码的用处了
• 还有一个场景就是 一个按钮可能是通用的组件-那此时就需要用到函数里面的另外一个参数menuId ;

  <AuthWrapper functionName='权限按钮唯一标识' menuId="唯一菜单ID">
      <Button>添加</Button>
  </AuthWrapper>

这样可以做到通用组件，不同页面的权限控制

• 通过数组的 some进行条件比较-得到是否拥有该按钮权限-然后判断是否渲染子节点this.props.children

控制前端按钮的显示隐藏就可以实现了。当然完全的权限按钮 还需要后台小伙伴的配合。 此文仅供参考。希望可以帮助到有需要的小伙伴们~