React开发——权限组件开发

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();