반응을 사용하여 메뉴 권한 제어를 구현하는 방법

이 글에서는 주로 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={[&#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)
    }

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

webpack에서 다중 페이지 개발을 구현하는 방법

Vue에서 측면 슬라이딩 메뉴 구성 요소를 구현하는 방법

3.js를 사용하여 3D 시네마를 구현하는 방법

관련 기능 JS 조절 및 기능 안정화(자세한 튜토리얼)

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