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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Enable root permissions with one click (quickly obtain root permissions)
Jun 02, 2024 pm 05:32 PM
It allows users to perform more in-depth operations and customization of the system. Root permission is an administrator permission in the Android system. Obtaining root privileges usually requires a series of tedious steps, which may not be very friendly to ordinary users, however. By enabling root permissions with one click, this article will introduce a simple and effective method to help users easily obtain system permissions. Understand the importance and risks of root permissions and have greater freedom. Root permissions allow users to fully control the mobile phone system. Strengthen security controls, customize themes, and users can delete pre-installed applications. For example, accidentally deleting system files causing system crashes, excessive use of root privileges, and inadvertent installation of malware are also risky, however. Before using root privileges
How to set permission access in QQ space
Feb 23, 2024 pm 02:22 PM
How to set permission access in QQ space? You can set permission access in QQ space, but most friends don’t know how to set permission access in QQ space. Next is the diagram of how to set permission access in QQ space brought by the editor for users. Text tutorial, interested users come and take a look! QQ usage tutorial QQ space how to set permission access 1. First open the QQ application, click [Avatar] in the upper left corner of the main page; 2. Then expand the personal information area on the left and click the [Settings] function in the lower left corner; 3. Enter the settings page Swipe to find the [Privacy] option; 4. Next in the privacy interface, select the [Permission Settings] service; 5. Then challenge to the latest page and select [Space Dynamics]; 6. Set up in QQ Space again
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Discuz Forum Permission Management: Read Permission Setting Guide
Mar 10, 2024 pm 05:33 PM
Discuz forum permission management: Read the permission setting guide In Discuz forum management, permission setting is a crucial part. Among them, the setting of reading permissions is particularly important, as it determines the scope of content that different users can see in the forum. This article will introduce in detail the reading permission settings of the Discuz forum and how to flexibly configure it for different needs. 1. Basic concepts of reading permissions In the Discuz forum, reading permissions mainly include the following concepts that need to be understood: Default reading permissions: Default after new user registration
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
How to obtain trustedinstaller permission 'Recommended steps to obtain TrustedInstaller permission'
Feb 06, 2024 pm 05:48 PM
This article will take you to understand the essence of TI and further explore how to obtain TI permissions with the help of powershell and NtObjectManager modules to complete any operation you want in the operating system. If you have ever administered a Windows system, you should be familiar with the concept of the trustedInstaller (TI) group. The TI group has important permissions in the operation of system files and registry. For example, you can view the properties of files under the System32 folder. In the security options, the TI group and the file owner have permission to delete and modify files. Even administrators cannot directly modify the security options. Therefore, for the operation of system files and registry, it is necessary to
Introduction to how to set everyone permissions on win7 computer
Mar 26, 2024 pm 04:11 PM
1. Take e-disk as an example. Open [Computer], and click [eDisk], right-click [Properties]. As shown in the figure: 2. In the [Window] page, switch the interface to the [Security] option, and click the [Edit] option below. As shown in the figure: 3. In the [Permissions] option, click the [Add] option. As shown in the figure: 4. The users and groups window pops up and click the [Advanced] option. As shown in the figure: 5. Click to expand the [Find Now] - [Everyone] options in order. When completed, click OK. As shown in the figure: 6. When you see that the user [everyone] has been added to [Group or User] on the [E Disk Permissions] page, select [everyone] and check the box in front of [Full Control]. After the setting is completed, Just press [OK]
Where to set the permissions of shared folders? Tips for setting the permissions of shared folders in Win10 to be read-only and cannot be modified
Feb 29, 2024 pm 03:43 PM
How to set shared folder read-only permissions in Win10? After the host shares the folder, some users only want others to access, read and view the files, but do not want others to modify the files on the host. This article is a tutorial on how to set the permissions of a shared folder to be read-only and cannot be modified. 1. First, share the folder according to the normal process. On the host side, right-click the folder that needs to be shared, and select: Properties-Sharing-Advanced Sharing-check Share this folder; 2. Then, click the permission option below. By default Everyone account, if there is not one, add an Everyone account; 3. Only check the read permission below, and then click OK; 4. Find the folder properties-security, and add an Ever
