반응에서 메뉴 권한 제어를 구현하는 방법은 무엇입니까?

이 글은 주로 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 '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)

렌더링 기능에서 동적으로 생성된 상단 메뉴 데이터의 길이가 0이 아닌 경우 키는 사이드 메뉴 항목을 동적으로 생성합니다.

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

관련 권장 사항:

React에서 구성 요소를 작성하는 방법

React 구성 요소의 수명 주기 기능은 무엇입니까

React 이벤트 시스템에 대한 지식

위 내용은 반응에서 메뉴 권한 제어를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!