Home  >  Article  >  Web Front-end  >  How to implement menu permission control in react?

How to implement menu permission control in react?

小云云
小云云Original
2018-05-18 11:09:014480browse

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 &#39;react&#39;
import { Link } from &#39;react-router&#39; // 引入Link处理导航跳转
import { connect } from &#39;react-redux&#39;
import { fetchPostsIfNeeded, updateSubMenuWhenClick } from &#39;../actions/count&#39;
import { Menu } from &#39;antd&#39;;
class TopMenu extends Component {
  constructor(props){
    super(props);
    this.handleMenuClick = this.handleMenuClick.bind(this);
  }

  handleMenuClick(e){
    // console.log(e.item.props[&#39;data-menukey&#39;]);
    const { updateSubMenuWhenClick } = this.props
    updateSubMenuWhenClick(true, e.item.props[&#39;data-menukey&#39;])
  }
  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={[&#39;0&#39;]}
        style={{ lineHeight: &#39;64px&#39; }}
        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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn