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 相关文章推荐
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
jquery密码强度校验
Dec 02 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
实例解析php的数据类型
2018/10/24 PHP
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
Jquery把获取到的input值转换成json
2017/05/15 jQuery
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
Numpy之文件存取的示例代码
2018/08/03 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
学雷锋先进个人事迹
2014/05/26 职场文书
国庆促销活动总结
2014/08/29 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电