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


Posted in Javascript onDecember 11, 2017

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

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

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

Javascript 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Angular 作用域scope的具体使用
Dec 11 #Javascript
angularjs实现柱状图动态加载的示例
Dec 11 #Javascript
Vue响应式原理深入解析及注意事项
Dec 11 #Javascript
js时间戳与日期格式之间转换详解
Dec 11 #Javascript
js时间戳与日期格式之间相互转换
Dec 11 #Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 #Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 #Javascript
You might like
PHP安全配置
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
pandas重新生成索引的方法
2018/11/06 Python
python的sorted用法详解
2019/06/25 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
求职推荐信范文
2013/12/01 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
高二英语教学反思
2014/01/19 职场文书
差生评语大全
2014/05/04 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2015大一新生军训感言
2015/08/01 职场文书
python 实现的截屏工具
2021/05/08 Python
详解MySQL连接挂死的原因
2021/05/18 MySQL
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL