React开发——权限组件开发
2020-03-16 本文已影响0人
泰然自若_750f
image.png
React 开发中中经常根据角色配置菜单和权限按钮情况,为了开发的便捷,封装一个组件,根据权限动态显示。
主要实现功能:
1:根据配置如果没有权限可自由选择是隐藏还是禁用(useDisabled)
2:权限编码code 属性定义在组件上,则是对组件内部的子组件实现权限的控制。如果定义在子组件上,就实现子组件的权限控制。
我在项目中使用Mobx作为全局状态管理,存储用户权限。
组件的代码实现
import React from 'react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
@inject('app')
@observer
class Permission extends React.Component {
static propTypes = {
code: PropTypes.string, //权限码值
useDisabled: PropTypes.bool,// true 为禁用 false 为没有权限时不显示
};
static defaultProps = {
useDisabled: false,
};
//校验权限
hasPermission=(code)=>{
// console.log(this.props.app.permissions.USER_ADD)
return this.props.app.permissions[code]?true:false;
}
render() {
let {useDisabled,code,children}=this.props;
//code存在值 分为两种情况
//1:在外围组件上,而且还是直接隐藏
if(code && !useDisabled){
return this.hasPermission(code)?children:null;
}
children=Array.isArray(children)?children:[children];
return children.map((item,index)=>{
const {key='key'+index}=item;
//不管是code在内部还是外部,此时统一处理
code=code?code:item.code;
if(code && useDisabled)
{
return React.cloneElement(
item,
{
disabled: !this.hasPermission(code),
key,
}
);
}
else if(code){
return this.hasPermission(code)? React.cloneElement(
item,
{
key,
}
):null
}
else {
return item;
}
})
}
}
export default Permission;
权限存储
import {
observable,
action,
computed
} from 'mobx';
class App{
@observable.ref permissions={
'USER_ADD':true,
'USER_DELETE':false,
};
}
export default new App();