php 按钮权限显示隐藏,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,

}

使用方式:

添加

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 ;

添加

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

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

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