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
1653
14
1413
52
1304
25
1251
29
1224
24
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
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.
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]
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
React's Role in HTML: Enhancing User Experience
Apr 09, 2025 am 12:11 AM
React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.
No permission to modify hosts file
Mar 03, 2024 am 10:31 AM
Some users requested to modify the Hosts file, but encountered the problem of not being able to save it when saving. This is because the Hosts file is a system file and usually requires corresponding permissions before it can be edited. Therefore, if you also encounter the following problems, you can refer to the article. Methods to solve the problem of no permission to modify the hosts file 1. Open the hosts file and uncheck the read-only option in front of it 2. If it shows that there is no permission when opening it, right-click the file and select properties 3. Click Safe to enter 4. Then try again Enter Advanced 5. Please enter "administrator" in the white box and click OK.
