react实现菜单权限控制的方法       本篇文章主要介绍了react实现菜单权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：

下面，通过react实现这样的后台管理系统(脚手架)，功能简介：

1.顶部的菜单项根据用户的角色动态生成。

2.侧边测菜单项根据已选的顶部菜单动态生成。

直接上：

路由配置：

export default (
 Route path="/" component={App} 
 ponent={EmployeeList}/ 
 Route path="/employee" component={Employee} 
 ponent={EmployeeList}/ 
 Route path="/employee/list" component={EmployeeList}/ 
 Route path="/employee/detail/:id" component={EmployeeDetail}/ 
 /Route 
 Route path="/goods" component={Goods} 
 ponent={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(pro凡科抠图){
 super(pro凡科抠图);
 this.handleMenuClick = this.handleMenuClick.bind(this);
 handleMenuClick(e){
 // console.log(e.item.pro凡科抠图['data-menukey']);
 const { updateSubMenuWhenClick } = this.pro凡科抠图
 updateSubMenuWhenClick(true, e.item.pro凡科抠图['data-menukey'])
 componentWillMount() {
 componentDidMount() {
 const { fetchPostsIfNeeded } = this.pro凡科抠图
 fetchPostsIfNeeded()
 render() {
 const { menuList, fetchPostsIfNeeded } = this.pro凡科抠图
 if(menuList.length != 0) {
 fetchPostsIfNeeded(true, menuList[0].key)
 return (
 Menu
 theme="dark"
 mode="horizontal"
 defaultSelectedKeys={['0']}
 '64px' }}
 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.pro凡科抠图
 if(menuList.length != 0) {
 fetchPostsIfNeeded(true, menuList[0].key)
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。