1. 程式人生 > >【共享單車】—— React後臺管理系統開發手記:權限設置和菜單調整(未完)

【共享單車】—— React後臺管理系統開發手記:權限設置和菜單調整(未完)

pla columns sna ets turn .ajax 管理 eas mage

前言:以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址:https://github.com/66Web/react-antd-manager,歡迎star。


一、創建角色

技術分享圖片

  • 權限菜單設計:RBAC權限模型(詳解鏈接)
  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後臺管理系統開發手記:權限設置和菜單調整(未完)