欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-19 15:56:06
通常公司的后台管理系统都需要权限控制,即不同的角色用户看到不同的菜单,如下图: 下面,通过react实现这样的后台管理系统(脚手架),功能简介: 1.顶部的菜单...

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

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)
    }

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