react如何实现菜单权限控制?
程序员文章站
2022-03-25 10:06:14
...
本文主要介绍了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) }
相关推荐:
以上就是react如何实现菜单权限控制?的详细内容,更多请关注其它相关文章!
下一篇: 如何用JS实现放大镜功能
推荐阅读
-
SpringBoot+JWT实现登录权限控制(代码)
-
浅谈Vue.js中如何实现自定义下拉菜单指令
-
[TCP/IP] TCP如何实现流量控制和拥塞控制
-
如何在Linux下设置访问控制列表(ACL)来控制用户的权限
-
如何控制网站关键词密度 实现高效SEO优化
-
vue addRoutes实现动态权限路由菜单的示例
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之九如何进行用户权限控制
-
vue中如何实现后台管理系统的权限控制的方法示例
-
浅谈基于SpringBoot实现一个简单的权限控制注解
-
自定义标签 + shiro 实现权限细粒度控制