前言：以下內(nèi)容基于React全家桶+AntD實(shí)戰(zhàn)課程的學(xué)習(xí)實(shí)踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。

---

一、創(chuàng)建角色

?

• ?權(quán)限菜單設(shè)計(jì)：RBAC權(quán)限模型（詳解鏈接）

RBAC，即基于角色的訪問控制（Role-Based Access Control），是優(yōu)秀的權(quán)限控制模型

主要通過角色和權(quán)限建立管理，再賦予用戶不同的角色，來實(shí)現(xiàn)權(quán)限控制的目標(biāo)

　　

• 角色列表展示：對(duì)應(yīng)Easy Mock數(shù)據(jù)接口/role/list {"code": 0,"list": {"item_list|7": [{"id|+1": 1,"role_name": /(管理人員)|(客服專員)|(財(cái)務(wù)專員)|(市場(chǎng)專員)|(人力專員)|(研發(fā))|(測(cè)試)|(系統(tǒng)管理員)/,"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 }

調(diào)用封裝好的axios.requestList()獲取角色數(shù)據(jù)

componentWillMount(){this.requestList(); }requestList = ()=>{axios.requestList(this, '/role/list', {}) }

使用封裝好的ETable組件實(shí)現(xiàn)角色列表的展示

<div className="content-wrap"><ETableupdateSelectedItem={Utils.updateSelectedItem.bind(this)}selectedRowKeys={this.state.selectedRowKeys}dataSource={this.state.list}columns={columns}/> </div>

• 創(chuàng)建角色：Modal彈框中嵌入表單子組件

表單組件：RoleForm = Form.create({})(RoleForm)實(shí)現(xiàn)表單數(shù)據(jù)的雙向綁定

// 角色創(chuàng)建 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="請(qǐng)輸入角色名稱"/>)}</FormItem><FormItem label="狀態(tài)" {...formItemLayout}>{getFieldDecorator('state',{initialValue:1})(<Select><Option value={1}>開啟</Option><Option value={0}>關(guān)閉</Option></Select>)}</FormItem></Form>);} } RoleForm = Form.create({})(RoleForm);

Modal彈框中應(yīng)用表單組件：通過wrappedComponentRef={(inst) => this.roleForm = inst }獲取表單元素的數(shù)據(jù)對(duì)象

<Modaltitle="創(chuàng)建角色"visible={this.state.isRoleVisible}onOk={this.handleRoleSubmit}onCancel={()=>{this.roleForm.props.form.resetFields();//表單重置this.setState({isRoleVisible:false})}}><RoleForm wrappedComponentRef={(inst) => this.roleForm = inst }/> </Modal>

點(diǎn)擊【創(chuàng)建角色】按鈕彈出彈框：給onClick事件綁定this.handleRole()，設(shè)置this.state.isRoleVisible為true

點(diǎn)擊【OK】提交創(chuàng)建角色：給onOk事件綁定this.handleRoleSubmit()。①通過this.roleForm.props.form.getFieldsValue()獲取表單的值，賦給params；②接口訪問成功后，關(guān)閉彈框，刷新列表數(shù)據(jù)。

// 角色提交 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 //關(guān)閉彈框})this.requestList(); //刷新列表數(shù)據(jù)}}) }

　　

二、設(shè)置權(quán)限

?

• 設(shè)置權(quán)限表單組件?：AntD Tree樹形結(jié)構(gòu)組件的使用

TreeNode樹形節(jié)點(diǎn)：const TreeNode = Tree.TreeNode;

加載完整的權(quán)限列表：本地定義menuConfig.js權(quán)限列表文件，通過遞歸方法渲染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 checkabledefaultExpandAll><TreeNode title="平臺(tái)權(quán)限" key="platform_all">{this.renderTreeNodes(menuConfig)}</TreeNode> </Tree>　　　　　　

• Modal彈框中應(yīng)用表單組件：

• 點(diǎn)擊【設(shè)置權(quán)限】按鈕彈出彈框：判斷若沒有this.state.selectedItem，提示需“選擇” //權(quán)限設(shè)置 handlePermission = ()=>{if (!this.state.selectedItem) {Modal.info({title: '信息',content: '請(qǐng)選擇一個(gè)角色'})return;}this.setState({isPermVisible: true,detailInfo: this.state.selectedItem //角色詳細(xì)信息});let menuList = this.state.selectedItem.menus; //角色權(quán)限this.setState({menuInfo:menuList}) }　　
• 點(diǎn)擊【OK】提交權(quán)限：給onOk事件綁定this.handlePermEditSubmit()
  
  

?

三、菜單調(diào)整?

?

?

四、用戶授權(quán)

?

?

?

?

?

?

?

---

注：項(xiàng)目來自慕課網(wǎng)

轉(zhuǎn)載于:https://www.cnblogs.com/ljq66/p/10232666.html

總結(jié)

以上是生活随笔為你收集整理的【共享单车】—— React后台管理系统开发手记：权限设置和菜单调整（未完）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。