react+ts 菜单权限学习三

登录页面  

根据接口userModel.query() 登录并且跳转到menu页面

menu页面是父页面 所有增加的页面是在menu这一个页面进行跳转

menu页面

1，根据userid获取到usermenuinfos里面的数据

    async componentDidMount() {
        let userinfo: any = window.localStorage.getItem("userinfo");
        if (userinfo) {
            userinfo = JSON.parse(userinfo);
            let userid = userinfo.id;//获取用户编号
            let { data: list } = await usermenuService.query({
                userid
            })
            console.log(list)
            this.setState({
                menuList: list.map((item: any) => {
                    item.com = component[item.com]
                    return item
                })
            })

        } else {
            this.props.history.push("/");
        }

    }

2，获取到数据之后 配置路由 根据获取到的数据 循环产生路由，

   2.1 解决获取到的com是一个字符串而不是一个真正的组件名称

          新建一个index.tsx并且导出  

import Menu from "./Menu"
import User from "./User"
import UserMenu from "./UserMenu"
import A1 from "./A1"
import A2 from "./A2"
import A3 from "./A3"
import A4 from "./A4"
import A5 from "./A5"
import A6 from "./A6"
export default {
    Menu: Menu,
    User: User,
    UserMenu: UserMenu,
    A1, A2, A3, A4, A5, A6
}

    引入到menu页面中

import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom"
import component from "../component/index"

  写出路由

import React, { Component } from 'react'
import usermenuService from '../model/usermenuService';
import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom"
import component from "../component/index"
export default class Menu extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            menuList: [],//菜单的集合
        }
    }
    async componentDidMount() {
        let userinfo: any = window.localStorage.getItem("userinfo");
        if (userinfo) {
            userinfo = JSON.parse(userinfo);
            let userid = userinfo.id;//获取用户编号
            let { data: list } = await usermenuService.query({
                userid
            })
            console.log(list)
            this.setState({
                menuList: list.map((item: any) => {
                    item.com = component[item.com]
                    return item
                })
            })

        } else {
            this.props.history.push("/");
        }

    }


    render() {
        return (
            <div>

                {this.state.menuList.map((item: any, index: any) => {
                    return (<a href={"#" + item.path} key={index}>{item.name}</a>)
                })}

                <Router>
                    <Switch>
                        {this.state.menuList.map((item: any, index: any) => {
                            return (<Route path={item.path} component={item.com} key={index}></Route>)
                        })}
                    </Switch>
                </Router>
            </div>
        )
    }
}