How to implement menu permission control in react?-JS Tutorial-php.cn

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 (              )

Copy after login

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 (  { menuList.map((e, index) =>  {e.name}  ) }  ) } } const getList = state => { return { menuList: state.update.menuList } } export default connect( getList, { fetchPostsIfNeeded, updateSubMenuWhenClick } )(TopMenu)

Copy after login

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) }

Copy after login

Related recommendations:

What are the ways to write components in React

What are the life cycle functions of React components

React event system knowledge

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!