react实现菜单权限控制的方法

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 (

theme="dark"

mode="horizontal"

defaultSelectedKeys={['0']}

style={{ lineHeight: '64px' }}

onClick={this.handleMenuClick}

>

{

menuList.map((e, index) =>

{e.name}

)

}

)

}

}

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)

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。