react實現菜單權限控制的方法
更新時間:2017年12月11日 16:47:36 作者:追尋
本篇文章主要介紹了react實現菜單權限控制的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
通常公司的后臺管理系統(tǒng)都需要權限控制,即不同的角色用戶看到不同的菜單,如下圖:

下面,通過react實現這樣的后臺管理系統(tǒng)(腳手架),功能簡介:
1.頂部的菜單項根據用戶的角色動態(tài)生成。
2.側邊測菜單項根據已選的頂部菜單動態(tài)生成。
直接上代碼:
路由配置:
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>
)
頂部菜單項單獨成了一個組件:
// 動態(tài)數據
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函數中,如果動態(tài)生成的頂部菜單數據長度不為0,則根據頂部菜單的key動態(tài)生成側邊菜單項。
const { menuList, fetchPostsIfNeeded } = this.props
if(menuList.length != 0) {
fetchPostsIfNeeded(true, menuList[0].key)
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
react?Table準備Spin?Empty?ConfigProvider組件實現
這篇文章主要為大家介紹了react?Table準備Spin、Empty、ConfigProvider組件實現詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-02-02
基于CSS實現MaterialUI按鈕點擊動畫并封裝成 React 組件
筆者先后開發(fā)過基于vue,react,angular等框架的項目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發(fā)一個項目的成本和復雜度,使開發(fā)者更專注于實現業(yè)務邏輯和服務化2021-11-11

