So implementieren Sie die Menüberechtigungssteuerung mithilfe von React-js-Tutorial-php.cn

So implementieren Sie die Menüberechtigungssteuerung mithilfe von React

亚连

Freigeben： 2018-06-21 14:35:26

Original

2404 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zur Implementierung der Menüberechtigungssteuerung in React vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Normalerweise erfordert das Backend-Verwaltungssystem des Unternehmens eine Berechtigungskontrolle, d. h. Benutzern mit unterschiedlichen Rollen werden unterschiedliche Menüs angezeigt, wie unten gezeigt:

Im Folgenden wird ein solches Backend-Managementsystem (Gerüst) durch React-Funktionseinführung implementiert:

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

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

Gehe direkt zum Code:

Routenkonfiguration:

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

In der Renderfunktion, wenn Es wird dynamisch generiert. Die Datenlänge des oberen Menüs beträgt nicht 0, und die Seitenmenüelemente werden basierend auf der Taste des oberen Menüs dynamisch generiert.

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

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die mehrseitige Entwicklung in Webpack

So implementieren Sie die Schiebemenükomponente in Vue

So implementieren Sie 3D-Kino mit three.js

Über Funktionsdrosselung und Funktions-Anti-Shake in JS (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Menüberechtigungssteuerung mithilfe von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!