react 권한 관리 및 페이지 동적 렌더링 트리 컨트롤 구현

react 권한 관리
백엔드 데이터 반환 예

{
     
    code: 200,
    userInfo: {
     
        name: '  ',
        age: '22',
        sex: ' '
    },
    menuInfo: [
        {
     
            menuId: 0,
            menuName: "  ",
            menuUrl: "/home/table",
            pathname: "Dish",
            componentPath: "Table",
            menuImgClass: 'el-icon-dish',
            menuState: "0",
            menuChilds: []
        }, {
     
            menuId: 1,
            menuName: "    ",
            menuUrl: "/home/Dish",
            pathname: "Dish",
            componentPath: "Dish",
            menuImgClass: 'el-icon-dish',
            menuState: "0",
            menuChilds: [{
     
                menuId: 9,
                menuName: "    ",
                menuUrl: "/home/Dish/DishSetList",
                pathname: "DishSetList",
                componentPath: "DishSetList",
                menuImgClass: '',
                menuState: "0",
                menuChilds: []
            },
            ]
  }

로그인 후 모bx나redux에 데이터를 저장하고session을 통해 로컬 저장을 하며 index에 데이터를 주입하여 필요한 페이지에서 호출합니다
사용하기 전에 여러분은 먼저 mobx와redux를 어떻게 사용하는지 알아보세요
Mobx 상태 관리자에서

import {
     observable, action} from 'mobx'

class userStore {
     
    @observable user = JSON.parse(sessionStorage.getItem('user'))||{
     }
    @observable menu = JSON.parse(sessionStorage.getItem('menu'))||{
     }
    @observable isLogin = false
    @observable token = ""

    @action
    login(user, token) {
     
        this.user = user;
        this.token = token;
        this.isLogin = true
        sessionStorage.setItem('user',JSON.stringify(user))
    }

    setMenu(menu) {
     
        sessionStorage.setItem('menu',JSON.stringify(menu))
        this.menu = menu;

    }

}

export default userStore

index.js 입구 파일 중

index  ：
<Provider {
     ...store}>
    <App/>
</Provider>,

메뉴 구성 요소에서 호출을 하는데, 여기에 교체 사상을 사용하여 하위 루트가 있는지 여부를 판단하여 교체 처리를 하고, 동적 생성 메뉴를 생성한다

import React from 'react'
import {
     Menu} from "antd";
import {
     Link} from "react-router-dom";
import {
     inject, observer} from "mobx-react";

const {
     SubMenu} = Menu;
//     mobx  user
@inject('user')
@observer
class Nav extends React.Component {
     
    constructor(props) {
     
        super(props);
        this.state = {
     
            menuList: this.props.user.menu
        }
    }

    bindMenu(menulist) {
     
        let MenuList = menulist.map((item) => {
     
            if (item.menuState !== "1") {
     
                if (item.menuChilds.length === 0) {
     
                    return <Menu.Item key={
     item.menuId}>
                        <Link to={
     item.menuUrl}>{
     item.menuName}</Link>
                    </Menu.Item>
                } else {
     
                    return <SubMenu key={
     item.menuId} title={
     item.menuName}>
                        {
     this.bindMenu(item.menuChilds)}
                    </SubMenu>
                }
            }
        });
        return MenuList
    }

    render() {
     
        let list = this.bindMenu(this.state.menuList);
        return (
            <Menu
                mode="inline"
                style={
     {
     height: '100%', borderRight: 0}}
                theme="dark"
                multiple={
     false}
                className="menuList"
            >
                {
     list}
            </Menu>

        )
    }
}


export {
     Nav as default}

루트 구성 요소에서 동적 루트를 생성하는 것도 교체된 사상을 통해 하위 루트를 판단하고 추가한다.여기에 문제가 생길 것이다.동급 루트와 하위 루트 사이의 생성, 플러그인 루트를 언제 사용하는지, 동급 루트를 직접 사용하는지.

import React from 'react'
import {
     Route, Switch} from 'react-router-dom'
import {
     inject, observer} from "mobx-react";
import loadable from '@loadable/component'

@inject('user')
@observer
class Routes extends React.Component {
     
    constructor(props) {
     
        super(props);
        this.state = {
     
            routeList: this.props.user.menu
        }
    }

    setRoute(menuList) {
     

        let RouteList = menuList.map((item) => {
     
            if (item.menuChilds.length === 0) {
     
                return <Route key={
     item.menuId} path={
     item.menuUrl}
                              component={
     loadable(() => import(`../pages/${
       item.componentPath}`))}/>
            } else {
     
                return [...this.setRoute(item.menuChilds), <Route key='00' path="/home" exact component={
     loadable(() => import('../pages/Index'))}></Route>]

        })
        return RouteList
    }

    render() {
     
        let Routes = this.setRoute(this.state.routeList)
        return (
            <Switch>
                {
     this.props.location.pathname !== "/login" && this.props.user.isLogin === false ?
                    window.location.href='/login' : Routes}
            </Switch>
        )
    }
}


export {
     Routes as default}

참고: 본고는 antd UI 프레임워크를 사용하여 페이지의 트리 컨트롤에 동적으로 연결합니다.

constructor() {
     
    super();
    this.state = {
     
        modalRightInfoVisible: false,//     
        RoleHasRouter: []//               id
    }
}
//          menuInfo
getRouterId(menuInfo) {
     
    let RouterId=[];
    for (let i = 0; i < menuInfo.length; i++) {
     
        if (menuInfo[i].menuState !== "1") {
     
            if (menuInfo[i].menuChilds.length === 0) {
     
                RouterId.push(menuInfo[i].menuId + '')
            } else {
     
               RouterId.push(menuInfo[i].menuId + '')
                this.getRouterId(menuInfo[i].menuChilds)
            }
        }
    }
    for (let i = 0; i < RouterId.length; i++) {
     
        if (RouterId[i].length > 2) {
     
            RouterId.splice(i, 1)
        }
    }
    return RouterId
}

//         ，           
openModalRightInfo(id) {
     
    //                  ，           
    let data = [];
    for (let i = 0; i < this.state.RoleList.length; i++) {
     
        if (id === this.state.RoleList[i].role_id) {
     
            data = this.state.RoleList[i].menuInfo
        }
    }
    this.setState({
     
        RoleHasRouter: this.getRouterId(data)
    })
    this.setState({
     modalRightInfoVisible: true});
}

//      
SetRouter(RouterList) {
     
    let checkBox = RouterList.map((item) => {
     
        if (item.menuState !== "1") {
     
            if (item.menuChilds.length === 0) {
     
                return <TreeNode title={
     item.menuName} key={
     item.menuId} checkable/>
            } else {
     
                return <TreeNode
                    title={
     item.menuName}
                    key={
     item.menuId}
                >
                    {
     this.SetRouter(item.menuChilds)}
                </TreeNode>
            }
        }
    })
    checkBox = checkBox.filter(function (val) {
     
        return !(!val || val === "");
    })
    return checkBox
}
//            
onRouterSelectData = (checkedKeys) => {
     
    this.setState({
     
        RoleHasRouter:checkedKeys
    })
    // this.state.RoleHasRouter = checkedKeys
}
//     
<Modal title="  "
       visible={
     this.state.modalRightInfoVisible}
       cancelText='  '
       okText='  '
       onCancel={
     () => {
     
           this.setState({
     
               modalRightInfoVisible: false,
               RoleHasRouter:[]
           })
       }}
       onOk={
     () => {
     
           this.setRouterRight()
       }}
>
    <div className='checkBox'>
        <Tree
            checkable
            onCheck={
     this.onRouterSelectData.bind(this)}
            checkedKeys={
     this.state.RoleHasRouter}
        >
            {
     this.SetRouter(this.state.RouterList)}
        </Tree>
    </div>
</Modal>