Heim > Web-Frontend > js-Tutorial > Wie implementiert man die Menüberechtigungssteuerung in React?

Wie implementiert man die Menüberechtigungssteuerung in React?

小云云
Freigeben: 2018-05-18 11:09:01
Original
4512 Leute haben es durchsucht

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>
)
Nach dem Login kopieren

Der obere Menüpunkt wird zu einer separaten Komponente:

// 动态数据
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)
Nach dem Login kopieren

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)
    }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage