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 相关文章推荐
js几个验证函数代码
Mar 25 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js中call与apply的用法小结
Dec 28 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 23 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
python reduce 函数使用详解
2017/12/05 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python散点图实例之随机漫步
2018/08/27 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python实现网页自动签到功能
2019/01/21 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python 下载及安装详细步骤
2019/11/04 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python运行异常管理解决方案
2020/03/09 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
护士在校生自荐信
2014/02/01 职场文书
老兵退伍标语
2014/10/07 职场文书
门市房租房协议书
2014/12/04 职场文书