当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react实现菜单权限控制的方法

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

2018年02月27日  | 移动技术网IT编程  | 我要评论

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

下面，通过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)
    }

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网