本文主要介绍了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中组件的写法有哪些
react组件的生命周期函数是什么
react事件系统知识
以上就是react如何实现菜单权限控制？的详细内容。