本篇文章主要介绍了react实现菜单权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：
下面，通过react实现这样的后台管理系统(脚手架)，功能简介：
1.顶部的菜单项根据用户的角色动态生成。
2.侧边测菜单项根据已选的顶部菜单动态生成。
直接上代码：
路由配置：
export default ()
顶部菜单项单独成了一个组件：
// 动态数据 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 ( ) } } 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) }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是react实现菜单权限控制的方法的详细内容，更多请关注0133技术站其它相关文章！
