Home >Web Front-end >JS Tutorial >How to implement menu permission control in react?
This article mainly introduces the method of implementing menu permission control in react. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help everyone.
Usually the company's backend management system requires permission control, that is, users with different roles see different menus, as shown below:
Below, through react To implement such a backend management system (scaffolding), function introduction:
1. The menu items at the top are dynamically generated based on the user's role.
2. Side test menu items are dynamically generated based on the selected top menu.
Go directly to the code:
Routing configuration:
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> )
The top menu item becomes a separate component:
// 动态数据 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)
In render In the function, if the data length of the dynamically generated top menu is not 0, the side menu items are dynamically generated based on the key of the top menu.
const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) }
Related recommendations:
What are the ways to write components in React
What are the life cycle functions of React components
The above is the detailed content of How to implement menu permission control in react?. For more information, please follow other related articles on the PHP Chinese website!