How to implement menu permission control using 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 it as a reference. Let’s follow the editor and take a look.
Usually the company’s backend management system requires permission control, that is, users with different roles see different menus, as shown below:
Below, such a backend management system (scaffolding) is implemented through react. 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 the render function, if it is dynamically generated The data length of the top menu is not 0, and 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)
}The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement multi-page development in webpack
##How to implement the sliding menu component in Vue
How to implement 3D cinema using three.js
About function throttling and function anti-shake in JS (detailed tutorial)
The above is the detailed content of How to implement menu permission control using 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
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.
Best Practices for Laravel Permissions Features: How to Correctly Control User Permissions
Nov 02, 2023 pm 12:32 PM
Best practices for Laravel permission functions: How to correctly control user permissions requires specific code examples Introduction: Laravel is a very powerful and popular PHP framework that provides many functions and tools to help us develop efficient and secure web applications. One important feature is permission control, which restricts user access to different parts of the application based on their roles and permissions. Proper permission control is a key component of any web application to protect sensitive data and functionality from unauthorized access
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.
Vue development skills: implementing dynamic routing and permission control
Nov 02, 2023 pm 12:12 PM
Vue development skills: Implementing dynamic routing and permission control Introduction: In modern web applications, dynamic routing and permission control are essential functions. For large applications, the implementation of these two functions can significantly improve user experience and security. This article will introduce how to use the Vue framework to implement development techniques for dynamic routing and permission control. We will illustrate the specific application of these techniques with examples. 1. Dynamic routing Dynamic routing refers to dynamically creating and parsing routes based on user roles or other conditions when the application is running. pass
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.
Discuz Permission Control: Learn how to set reading permissions
Mar 10, 2024 am 09:03 AM
Discuz permission control: To understand how to set reading permissions, specific code examples are required. In the Discuz forum, permission control is a very important function that can help administrators accurately control user operations and access permissions and protect the security and order of the forum. Among them, reading permission is one of the necessary permission settings. By setting different levels of reading permissions, different users can see different content when browsing the forum, ensuring the security and privacy of information. In Discuz, setting reading permissions is actually very simple.
How to implement user authentication and permission control in PHP projects?
Nov 02, 2023 pm 12:38 PM
How to implement user authentication and permission control in PHP projects? In modern web applications, user authentication and permission control are one of the most important functions. User authentication is used to verify the user's identity and permissions, while permission control determines the user's access permissions to various resources in the system. Implementing user authentication and permission control in PHP projects can protect the security of user data and ensure that only authorized users of the system can access sensitive information. This article will introduce a basic method to help you implement user authentication and permission control functions to ensure
