前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。
一、創建角色
- 權限菜單設計：RBAC權限模型（詳解鏈接）
- RBAC，即基於角色的訪問控制（Role-Based Access Control），是優秀的權限控制模型
- 主要通過角色和權限建立管理，再賦予用戶不同的角色，來實現權限控制的目標
- 角色列表展示：對應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 }
-
調用封裝好的axios.requestList()獲取角色數據
componentWillMount(){ this.requestList(); } requestList = ()=>{ axios.requestList(this, '/role/list', {}) } -
使用封裝好的ETable組件實現角色列表的展示
<div className="content-wrap"> <ETable updateSelectedItem={Utils.updateSelectedItem.bind(this)} selectedRowKeys={this.state.selectedRowKeys} dataSource={this.state.list} columns={columns} /> </div>
-
創建角色：Modal彈框中嵌入表單子組件
-
表單組件：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); -
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> -
點擊【創建角色】按鈕彈出彈框：給onClick事件綁定this.handleRole()，設置this.state.isRoleVisible為true
-
點擊【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樹形結構組件的使用
- TreeNode樹形節點：const TreeNode = Tree.TreeNode;
- 加載完整的權限列表：本地定義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()
三、菜單調整
四、用戶授權
注：項目來自慕課網