react實(shí)現(xiàn)菜單權(quán)限控制的方法
通常公司的后臺(tái)管理系統(tǒng)都需要權(quán)限控制,即不同的角色用戶看到不同的菜單,如下圖:
下面,通過(guò)react實(shí)現(xiàn)這樣的后臺(tái)管理系統(tǒng)(腳手架),功能簡(jiǎn)介:
1.頂部的菜單項(xiàng)根據(jù)用戶的角色動(dòng)態(tài)生成。
2.側(cè)邊測(cè)菜單項(xiàng)根據(jù)已選的頂部菜單動(dòng)態(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> )
頂部菜單項(xiàng)單獨(dú)成了一個(gè)組件:
// 動(dòng)態(tài)數(shù)據(jù) import React, { Component } from 'react' import { Link } from 'react-router' // 引入Link處理導(dǎo)航跳轉(zhuǎn) 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函數(shù)中,如果動(dòng)態(tài)生成的頂部菜單數(shù)據(jù)長(zhǎng)度不為0,則根據(jù)頂部菜單的key動(dòng)態(tài)生成側(cè)邊菜單項(xiàng)。
const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react-router?v6實(shí)現(xiàn)動(dòng)態(tài)路由實(shí)例
這篇文章主要為大家介紹了react-router?v6實(shí)現(xiàn)動(dòng)態(tài)路由實(shí)例詳解,<BR>有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例
這篇文章主要為大家介紹了React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10一篇文章教你用React實(shí)現(xiàn)菜譜系統(tǒng)
本篇文章主要介紹了React實(shí)現(xiàn)菜譜軟件的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-09-09