本文主要介紹了react實現選單權限控制的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考,希望能幫助到大家。
通常公司的後台管理系統都需要權限控制,也就是不同的角色使用者看到不同的選單,如下圖:
下面,透過react實作這樣的後台管理系統(鷹架),功能簡介:
1.頂部的選單項目根據使用者的角色動態產生。
2.側邊測選單項目根據已選取的頂部選單動態產生。
直接上程式碼:
路由設定:
export default ( <Route path="/" component={App}> <IndexRoute component={EmployeeList}/> <Route path="/employee" component={Employee}> <IndexRoute component={EmployeeList}/> <Route path="/employee/list" component={EmployeeList}/> <Route path="/employee/detail/:id" component={EmployeeDetail}/> </Route> <Route path="/goods" component={Goods}> <IndexRoute component={GoodsList}/> <Route path="/goods/list" component={GoodsList}/> <Route path="/goods/detail/:id" component={GoodsDetail}/> </Route> </Route> )
頂部選單項目單獨變成了一個元件:
// 动态数据 import React, { Component } from 'react' import { Link } from 'react-router' // 引入Link处理导航跳转 import { connect } from 'react-redux' import { fetchPostsIfNeeded, updateSubMenuWhenClick } from '../actions/count' import { Menu } from 'antd'; class TopMenu extends Component { constructor(props){ super(props); this.handleMenuClick = this.handleMenuClick.bind(this); } handleMenuClick(e){ // console.log(e.item.props['data-menukey']); const { updateSubMenuWhenClick } = this.props updateSubMenuWhenClick(true, e.item.props['data-menukey']) } componentWillMount() { } componentDidMount() { const { fetchPostsIfNeeded } = this.props fetchPostsIfNeeded() } render() { const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) } return ( <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['0']} style={{ lineHeight: '64px' }} onClick={this.handleMenuClick} > { menuList.map((e, index) => <Menu.Item key={index} data-menukey={e.key} > <Link to={{ pathname: e.url }} >{e.name}</Link> </Menu.Item> ) } </Menu> ) } } const getList = state => { return { menuList: state.update.menuList } } export default connect( getList, { fetchPostsIfNeeded, updateSubMenuWhenClick } )(TopMenu)
在render函數中,如果動態產生的頂部選單資料長度不為0,則根據頂部選單的key動態產生側邊選單項目。
const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) }
相關推薦:
以上是react如何實作選單權限控制?的詳細內容。更多資訊請關注PHP中文網其他相關文章!