Comment implémenter le contrôle des autorisations de menu à l'aide de React

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 assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

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, un tel système de gestion backend (échafaudage) est implémenté via React Introduction à 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 le fonction de rendu, si la longueur des données du menu supérieur généré 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)
    }

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le développement multi-pages dans webpack

Comment implémenter le composant de menu coulissant dans Vue

Comment implémenter le cinéma 3D à l'aide de three.js

À propos de la fonction throttling et de la fonction anti-shake dans JS (tutoriel détaillé)

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!