ホームページ > 記事 > ウェブフロントエンド > Reactを使ったメニュー権限制御の実装方法
この記事ではReactでメニューのパーミッション制御を実装する方法を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして一緒に見てみましょう
通常、会社のバックエンド管理システムには権限制御が必要です。つまり、以下に示すように、異なる役割を持つユーザーには異なるメニューが表示されます:
以下では、そのようなバックエンド管理システムが実装されています。 React (Scaffolding) による機能紹介:
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 '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={['0']} style={{ lineHeight: '64px' }} 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でない場合、トップメニューのキーに基づいて動的にサイドメニュー項目を生成します。
rreee以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。
関連記事:
関連関数JS のスロットリングと関数の安定化 (詳細なチュートリアル)
以上がReactを使ったメニュー権限制御の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。