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 concat数组累加 示例
Sep 03 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php 静态化实现代码
2009/03/20 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
详解js异步文件加载器
2016/01/24 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
简介Django框架中可使用的各类缓存
2015/07/23 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
办公室前台岗位职责
2014/01/04 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
请假条格式范文
2014/04/10 职场文书
行政求职信
2014/07/04 职场文书
怎样写离婚协议书
2014/09/10 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
房屋租赁协议书
2014/10/18 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
鼋头渚导游词
2015/02/05 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
排球赛新闻稿
2015/07/17 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书