Wie implementiert man die Menüberechtigungssteuerung in React?

In diesem Artikel wird hauptsächlich die Methode zur Implementierung der Menüberechtigungssteuerung in React vorgestellt. Jetzt teile ich sie mit Ihnen und hoffe, dass sie Ihnen helfen kann.

Normalerweise erfordert das Backend-Verwaltungssystem des Unternehmens eine Berechtigungskontrolle, das heißt, Benutzer mit unterschiedlichen Rollen sehen unterschiedliche Menüs, wie unten gezeigt:

Unten durch Reagieren Um ein solches Backend-Management-System (Gerüst) zu implementieren, Funktionseinführung:

1. Die Menüpunkte oben werden dynamisch basierend auf der Rolle des Benutzers generiert.

2. Seitentestmenüelemente werden dynamisch basierend auf dem ausgewählten oberen Menü generiert.

Direkt zum Code gehen:

Routing-Konfiguration:

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

Der obere Menüpunkt wird zu einer separaten Komponente:

// 动态数据
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)

Wenn in der Renderfunktion die Länge der dynamisch generierten Top-Menü-Daten nicht 0 ist, werden die Seitenmenüelemente basierend auf der Taste des Top-Menüs dynamisch generiert.

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

Verwandte Empfehlungen:

Wie können Komponenten in React geschrieben werden?

Was sind die Lebenszyklusfunktionen von React? Komponenten

Wissen über Ereignissysteme reagieren

Das obige ist der detaillierte Inhalt vonWie implementiert man die Menüberechtigungssteuerung in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!