共享单车—— React后台管理系统开发手记:权限设置和菜单调整(未完)

Posted ljq66

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了共享单车—— React后台管理系统开发手记:权限设置和菜单调整(未完)相关的知识,希望对你有一定的参考价值。

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star。


一、创建角色

 技术分享图片

  1. RBAC,即基于角色的访问控制(Role-Based Access Control),是优秀的权限控制模型
  2. 主要通过角色权限建立管理,再赋予用户不同的角色,来实现权限控制的目标

    技术分享图片  

  • 角色列表展示:对应Easy Mock数据接口/role/list
    {
      "code": 0,
      "list": {
        "item_list|7": [{
          "id|+1": 1,
          "role_name": /(管理人员)|(客服专员)|(财务专员)|(市场专员)|(人力专员)|(研发)|(测试)|(系统管理员)/,
          "status|0-1": 1,
          "authorize_user_name": "@cname",
          "authorize_time": 1521270166000,
          "create_time": 1499305790000,
          "menus": ["/home", "/ui/buttons", "/ui/modals", "/ui/loadings", "/ui/notification", "/ui/messages", "/ui/tabs", "/ui/gallery", "/ui/carousel", "/ui"]
        }]
      },
      "page": 1,
      "page_size": 10,
      "total_count": 25,
      "page_count": 3
    }
    
  1. 调用封装好的axios.requestList()获取角色数据

    componentWillMount(){
            this.requestList();   
    }
    
    requestList = ()=>{
            axios.requestList(this, ‘/role/list‘, {})
    }
  2. 使用封装好的ETable组件实现角色列表的展示

    <div className="content-wrap">
          <ETable
               updateSelectedItem={Utils.updateSelectedItem.bind(this)}
               selectedRowKeys={this.state.selectedRowKeys}
               dataSource={this.state.list}
               columns={columns}
           />
    </div>
    
  • 创建角色:Modal弹框中嵌入表单子组件

  1. 表单组件:RoleForm = Form.create({})(RoleForm)实现表单数据的双向绑定

    // 角色创建
    class RoleForm extends React.Component{
    
        render(){
            const { getFieldDecorator } = this.props.form;
            const formItemLayout = {
                labelCol: {span: 5},
                wrapperCol: {span: 16}
            };
            return (
                <Form layout="horizontal">
                    <FormItem label="角色名称" {...formItemLayout}>
                        {
                            getFieldDecorator(‘role_name‘,{
                                initialValue:‘‘
                            })(
                                <Input type="text" placeholder="请输入角色名称"/>
                            )
                        }
                    </FormItem>
                    <FormItem label="状态" {...formItemLayout}>
                        {
                            getFieldDecorator(‘state‘,{
                                initialValue:1
                            })(
                            <Select>
                                <Option value={1}>开启</Option>
                                <Option value={0}>关闭</Option>
                            </Select>
                        )}
                    </FormItem>
                </Form>
            );
        }
    }
    RoleForm = Form.create({})(RoleForm);
  2. Modal弹框中应用表单组件:通过wrappedComponentRef={(inst) => this.roleForm = inst }获取表单元素的数据对象

    <Modal
            title="创建角色"
            visible={this.state.isRoleVisible}
            onOk={this.handleRoleSubmit}
            onCancel={()=>{
                  this.roleForm.props.form.resetFields();//表单重置
                  this.setState({
                       isRoleVisible:false
                  })
            }}
     >
            <RoleForm wrappedComponentRef={(inst) => this.roleForm = inst }/>
    </Modal>
  3. 点击【创建角色】按钮弹出弹框:给onClick事件绑定this.handleRole(),设置this.state.isRoleVisible为true

  4. 点击【OK】提交创建角色:给onOk事件绑定this.handleRoleSubmit()。①通过this.roleForm.props.form.getFieldsValue()获取表单的值,赋给params;②接口访问成功后,关闭弹框,刷新列表数据。

    // 角色提交
    handleRoleSubmit = ()=>{
        let data = this.roleForm.props.form.getFieldsValue(); //获取表单的值
        axios.ajax({
                url:‘role/create‘, //Easy Mock中只有{"code": 0}
                data:{
                    params:{
                        ...data
                    }
                }
        }).then((res)=>{
                if(res.code === 0){
                    this.setState({
                        isRoleVisible:false   //关闭弹框
                    })
                    this.requestList();  //刷新列表数据
                }
            })
    }

      

二、设置权限

技术分享图片 

  • 设置权限表单组件 :AntD Tree树形结构组件的使用
  1. TreeNode树形节点:const TreeNode = Tree.TreeNode;
  2. 加载完整的权限列表:本地定义menuConfig.js权限列表文件,通过递归方法渲染TreeNode
    import menuConfig from ‘../../config/menuConfig‘
    
    renderTreeNodes = (data,key=‘‘) => {
            return data.map((item) => {
                let parentKey = key+item.key;
                if (item.children) {
                    return (
                        <TreeNode title={item.title} key={parentKey} dataRef={item} className="op-role-tree">
                            {this.renderTreeNodes(item.children,parentKey)}
                        </TreeNode>
                    );
                } else if (item.btnList) {
                    return (
                        <TreeNode title={item.title} key={parentKey} dataRef={item} className="op-role-tree">
                            { this.renderBtnTreedNode(item,parentKey) }
                        </TreeNode>
                    );
                }
                return <TreeNode {...item} />;
            });
    };
    
    renderBtnTreedNode = (menu,parentKey=‘‘)=> {
            const btnTreeNode = []
            menu.btnList.forEach((item)=> {
                // console.log(parentKey+‘-btn-‘+item.key);
                btnTreeNode.push(<TreeNode title={item.title} key={parentKey+‘-btn-‘+item.key} className="op-role-tree"/>);
            })
            return btnTreeNode;
    }
    
    <Tree 
         checkable
         defaultExpandAll
         >
           <TreeNode title="平台权限" key="platform_all">
                   {this.renderTreeNodes(menuConfig)}
           </TreeNode>
    </Tree>
    

        

      

  • Modal弹框中应用表单组件:
  • 点击【设置权限】按钮弹出弹框:判断若没有this.state.selectedItem,提示需“选择”
    //权限设置
    handlePermission = ()=>{
            if (!this.state.selectedItem) {
                Modal.info({
                    title: ‘信息‘,
                    content: ‘请选择一个角色‘
                })
                return;
            }
            this.setState({
                isPermVisible: true,
                detailInfo: this.state.selectedItem //角色详细信息
            });
            let menuList = this.state.selectedItem.menus; //角色权限
            this.setState({
                menuInfo:menuList
            })
    }  
  • 点击【OK】提交权限:给onOk事件绑定this.handlePermEditSubmit()

 

三、菜单调整 

 

 

四、用户授权

 技术分享图片

 

 

 

 

 

 


注:项目来自慕课网

以上是关于共享单车—— React后台管理系统开发手记:权限设置和菜单调整(未完)的主要内容,如果未能解决你的问题,请参考以下文章

共享单车—— React后台管理系统开发手记:Redux集成开发

共享单车—— React后台管理系统开发手记:城市管理和订单管理

共享单车—— React后台管理系统开发手记:AntD Form基础组件

共享单车—— React后台管理系统开发手记:主页面架构设计

共享单车—— React后台管理系统开发手记:AntD Table高级表格

共享单车—— React后台管理系统开发手记:AntD Table基础表格