首頁 > web前端 > js教程 > 主體

react如何實作選單權限控制?

小云云
發布: 2018-05-18 11:09:01
原創
4475 人瀏覽過

本文主要介紹了react實現選單權限控制的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考,希望能幫助到大家。

通常公司的後台管理系統都需要權限控制,也就是不同的角色使用者看到不同的選單,如下圖:

下面,透過react實作這樣的後台管理系統(鷹架),功能簡介:

1.頂部的選單項目根據使用者的角色動態產生。

2.側邊測選單項目根據已選取的頂部選單動態產生。

直接上程式碼:

路由設定:

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>
)
登入後複製

頂部選單項目單獨變成了一個元件:

// 动态数据
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)
登入後複製

在render函數中,如果動態產生的頂部選單資料長度不為0,則根據頂部選單的key動態產生側邊選單項目。

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

相關推薦:

React中元件的寫法有哪些

React元件的生命週期函數是什麼

React事件系統知識

以上是react如何實作選單權限控制?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板