Comment implémenter le contrôle des autorisations de menu en réaction ?

Cet article présente principalement la méthode d'implémentation du contrôle des autorisations de menu dans React. L'éditeur pense que c'est plutôt bon. Maintenant, je le partage avec vous et vous donne une référence, j'espère qu'il pourra vous aider.

Habituellement, le système de gestion backend de l'entreprise nécessite un contrôle des autorisations, c'est-à-dire que les utilisateurs avec des rôles différents voient différents menus, comme indiqué ci-dessous :

Ci-dessous, via React Pour mettre en œuvre un tel système de gestion backend (échafaudage), introduction de la fonction :

1. Les éléments de menu en haut sont générés dynamiquement en fonction du rôle de l'utilisateur.

2. Les éléments du menu de test latéral sont générés dynamiquement en fonction du menu supérieur sélectionné.

Accédez directement au code :

Configuration du routage :

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

L'élément de menu supérieur devient un composant distinct :

// 动态数据
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={[&#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)

Dans la fonction de rendu, si la longueur des données du menu supérieur générées dynamiquement n'est pas 0, les éléments du menu latéral sont générés dynamiquement en fonction de la clé du menu supérieur.

const { menuList, fetchPostsIfNeeded } = this.props
    if(menuList.length != 0) {
      fetchPostsIfNeeded(true, menuList[0].key)
    }

Recommandations associées :

Quelles sont les façons d'écrire des composants dans React

Quelles sont les fonctions de cycle de vie de React composants

Connaissance du système d'événements React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!