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:,
        tit:"试卷管理",
        children:[
            {
                path:"/home/testpaper/testpaper1",
                element:,
                tit:"试卷管理"
            },
            {
                path:"/home/testpaper/testpaper2",
                element:,
                tit:"试卷管理"
            },
        ]
    },
    {
        path:"/home/test",
        element:,
        tit:"试题管理"
    },
    {
        path:"/home/achievement",
        element:,
        tit:"成绩管理"
    }



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



const routerconfig = [
    {
        path:"/login",
        element:
    },
    {
        path:"/home",
        element:,
        children:localStorage.getItem("user")==="admin"?adminChild:userChild
    },
    {
        path:'/',
        element:
    },
    {
        path:"*",
        element:
    }
]
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(成绩管理, '1', ),
//     getItem(试题管理, '2', ),
//     getItem(试卷管理, '3', ),
   
//   ];
  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:{item.tit},
            children:item.children ? filterRouter(item.children):""
        })
    })
    console.log(data,"data");
    // function getItem(label, key, icon, path) {
    //   console.log(label);
    //   const nav = {label}
    //   return {
    //     key,
    //     icon,
    //     children:"",
    //     label:nav
    //   };
    // }
    return data
 }
  // useEffect(()=>{
  //   if ( !localStorage.getItem("token")) {
  //       navigate("/login")
  //   }
  
  // },[])
    const [collapsed, setCollapsed] = useState(false);
    return (
      
         setCollapsed(value)}>
          

          
        
        
          

          
            

              
            
          
          

            Ant Design ©2018 Created by Ant UED
          
        
      
    );
  };
  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"
    
    })

  };