react rbac 路由权限

后端返回前端用户身份

 devServer.app.use("/api/login",(req,res)=>{
        let {username,password} = req.query
        let token = jwt.sign({
          exp: Math.floor(Date.now() / 1000) + (60 * 60),
          data: username
        }, 'secret');
        if (username === "admin" && password === "123") {
          res.send({
            code:1,
            msg:"登陆成功",
            token,
            user:"admin"
          })
        } else if (username === "user" && password === "123") {
          res.send({
            code:1,
            msg:"登陆成功",
            token,
            user:"user"
          })
        }
       
       
       
      });

前端写好每个用户对应的路由

  import {lazy} from "react"
import {Navigate} from "react-router-dom"
const Login = lazy(()=>import("../pages/Login"))
const Home = lazy(()=>import("../pages/Index/Home"))
const Achievement = lazy(()=>import("../pages/Index/achievement"))
const Test = lazy(()=>import("../pages/Index/test"))
const Testpaper = lazy(()=>import("../pages/Index/testPaper"))
const Testpaper1 = lazy(()=>import("../pages/tsetpaper/testpaper1"))
const Testpaper2 = lazy(()=>import("../pages/tsetpaper/testpaper2"))
const Notfind = lazy(()=>import("../pages/notFind"))

export const adminChild = [
    {
        path:"/home/testpaper",
        element:<Testpaper></Testpaper>,
        tit:"试卷管理",
        children:[
            {
                path:"/home/testpaper/testpaper1",
                element:<Testpaper1></Testpaper1>,
                tit:"试卷管理"
            },
            {
                path:"/home/testpaper/testpaper2",
                element:<Testpaper2></Testpaper2>,
                tit:"试卷管理"
            },
        ]
    },
    {
        path:"/home/test",
        element:<Test></Test>,
        tit:"试题管理"
    },
    {
        path:"/home/achievement",
        element:<Achievement></Achievement>,
        tit:"成绩管理"
    }



]
export const userChild = [
    {
        path:"/home/testpaper",
        element:<Testpaper></Testpaper>,
        tit:"试卷管理",
        children:[
            {
                path:"/home/testpaper/testpaper1",
                element:<Testpaper1></Testpaper1>,
                tit:"试卷管理"
            },
        ]
    },
    {
        path:"/home/test",
        element:<Test></Test>,
        tit:"试题管理"
    },
    {
        path:"/home/achievement",
        element:<Achievement></Achievement>,
        tit:"成绩管理"
    }
]



const routerconfig = [
    {
        path:"/login",
        element:<Login></Login>
    },
    {
        path:"/home",
        element:<Home></Home>,
        children:localStorage.getItem("user")==="admin"?adminChild:userChild
    },
    {
        path:'/',
        element:<Navigate to="/login"></Navigate>
    },
    {
        path:"*",
        element:<Notfind></Notfind>
    }
]
export default routerconfig

前端组件写递归函数生成菜单

import {Outlet,NavLink,useNavigate} from "react-router-dom"
import { adminChild, userChild } from "../../router";
import IsLogin from "../../utils/isLogin";
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
  } from '@ant-design/icons';
  import { Breadcrumb, Layout, Menu } from 'antd';
  import React, { useState,useEffect } from 'react';
  const { Header, Content, Footer, Sider } = Layout;
  console.log(adminChild,userChild,"zujian");
  
 
 
//   const items = [
//     getItem(<NavLink to="/home/achievement">成绩管理</NavLink>, '1', <PieChartOutlined />),
//     getItem(<NavLink to="/home/test">试题管理</NavLink>, '2', <DesktopOutlined />),
//     getItem(<NavLink to="/home/testpaper">试卷管理</NavLink>, '3', <DesktopOutlined />),
   
//   ];
  const App = () => {
  let navigate = useNavigate()
  let children= localStorage.getItem("user")==="admin"?adminChild:userChild
  function filterRouter (homeChild) {
    const data = []
    homeChild.forEach((item,index)=>{
        data.push({
            key:Math.random(),
            icon:< DesktopOutlined/>,
            label:<NavLink to={item.path}>{item.tit}</NavLink>,
            children:item.children ? filterRouter(item.children):""
        })
    })
    console.log(data,"data");
    // function getItem(label, key, icon, path) {
    //   console.log(label);
    //   const nav = <NavLink to={path}>{label}</NavLink>
    //   return {
    //     key,
    //     icon,
    //     children:"",
    //     label:nav
    //   };
    // }
    return data
 }
  // useEffect(()=>{
  //   if ( !localStorage.getItem("token")) {
  //       navigate("/login")
  //   }
  
  // },[])
    const [collapsed, setCollapsed] = useState(false);
    return (
      <Layout
        style={{
          minHeight: '100vh',
        }}
      >
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={filterRouter(children)} />
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
              background:"red"
            }}
          />
          <Content
            style={{
              margin: '0 16px',
            }}
          >
            <div
              className="site-layout-background"
              style={{
                padding: 24,
                minHeight: 360,
              }}
            >
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer
            style={{
              textAlign: 'center',
            }}
          >
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  };
  export default IsLogin(App);

前端登陆

const onFinish = (values) => {
    console.log('Success:', values);
    axios.get("/api/login", {
      params: values
    }).then(res => {
      console.log(res.data);
      localStorage.setItem("token", res.data.token)
      localStorage.setItem("user", res.data.user)
      // navigate("/home")，用loaction.href 可以解决跳不过去的问题
       window.location.href = "/home"
    
    })

  };