功能，路由权限

src/App.tsx

 import './assets/style/App.scss';
 import PrivateRouter from '~/router/privateRouter';
+import { BrowserRouter } from 'react-router-dom';
 
 const App = () => (
   <>
-    <PrivateRouter />
+    <BrowserRouter>
+      <PrivateRouter />
+    </BrowserRouter>
   </>
 );
 

src/components/layout/menu/index.tsx

@@ -60,7 +60,9 @@ export function MenuView() {
   // 组件挂载
   useEffect(() => {
     // 设置侧边栏数据
-    setItems(getItem(authRouterList()));
+    authRouterList().then((value) => {
+      setItems(getItem(value));
+    });
     // 设置当前选中的项目
     setOpenKeys([getRoutePid(routerList, location.pathname).toString()]);
     // 设置当前选中的项目的subMenu

src/components/layout/title/index.tsx

@@ -5,7 +5,7 @@ import { Button, Dropdown, MenuProps, Modal } from 'antd';
 import Logo from '../../../assets/icon/logo_big.png';
 import './index.scss';
 import { REMOVE_MENU, REMOVE_MENU_ID, SET_COLLAPSE } from '~/store/module/menu';
-import { REMOVE_ROLE_LIST } from '~/store/module/userInfo';
+import { REMOVE_ROLE_ID } from '~/store/module/userInfo';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import Cookies from 'js-cookie';
@@ -42,7 +42,7 @@ export function TitleView() {
                 Cookies.remove('SHAREFLY-TOKEN');
                 dispatch(REMOVE_MENU());
                 dispatch(REMOVE_MENU_ID());
-                dispatch(REMOVE_ROLE_LIST());
+                dispatch(REMOVE_ROLE_ID());
               },
             });
           }}

src/pages/common/login/index.tsx

@@ -6,7 +6,7 @@ import Cookies from 'js-cookie';
 import './index.scss';
 import { InterReqType } from '~/api/interface';
 import { BackEndLoginType } from '~/api/interface/commonType';
-import { CommonAPI, SystemManageAPI } from '~/api';
+import { CommonAPI } from '~/api';
 import { useDispatch } from 'react-redux';
 import { SET_USERINFO } from '~/store/module/userInfo';
 import { authRouterList } from '~/router';
@@ -37,12 +37,11 @@ function LoginView() {
       Cookies.set('remember', String(values?.remember));
       // 存用户信息
       dispatch(SET_USERINFO(res.result));
-      SystemManageAPI.getListRoleMenuInfo({ roleId: res.result.roleInfo.id }).then(({ result }) => {
-        localStorage.setItem('roleObj', JSON.stringify(result));
-        const routeList = authRouterList();
-        // 获取第一个路由
-        navigate({ pathname: routeList[0]?.children?.[0]?.path });
+      localStorage.setItem('roleId', res.result.roleInfo.id.toString());
+      authRouterList().then((value: any) => {
+        navigate({ pathname: value[0]?.children?.[0]?.path });
       });
+      // 获取第一个路由
     } else {
       message.error('登录失败，请检查账号信息');
     }

src/router/index.ts

 import { RouteObject } from 'react-router-dom';
-import { RouteObjectType, routerList, whiteRouterList } from '~/router/router';
+import { RouteObjectType, routerList } from '~/router/router';
 import { InterDataType } from '~/api/interface';
 import { listMenuInfoType } from '~/api/interface/systemManageType';
+import { SystemManageAPI } from '~/api';
 //菜单类型
 type menuType = InterDataType<listMenuInfoType>;
 
 // 获取用户权限路由列表
-export const authRouterList = () => {
-  const roleObj: menuType = JSON.parse(localStorage.getItem('roleObj') as string);
-  if (roleObj) {
-    const ids: number[] = getAllKeys([roleObj]);
+export const authRouterList = async () => {
+  if (localStorage.getItem('roleId')) {
+    const { result } = await SystemManageAPI.getListRoleMenuInfo({
+      roleId: Number(localStorage.getItem('roleId')),
+    });
+    const ids: number[] = getAllKeys([result]);
     const getRouteList = (data: RouteObjectType[]) => {
       return data.reduce((pre: RouteObjectType[], cur) => {
         if (ids.includes(cur.meta.id) || cur.meta.hidden) {
@@ -21,9 +24,9 @@ export const authRouterList = () => {
         return pre;
       }, []);
     };
-    return [...getRouteList(routerList)];
+    return Promise.resolve([...getRouteList(routerList)]);
   }
-  return [];
+  return Promise.resolve([]);
 };
 //获取全部节点
 const getAllKeys = (data: menuType[]) => {
@@ -35,7 +38,5 @@ const getAllKeys = (data: menuType[]) => {
     return pre;
   }, []);
 };
-// 整合路由数据
-export const routes = [...authRouterList(), ...whiteRouterList];
 // 路由表类型
 export type routerItem = RouteObject & RouteObjectType;

src/router/privateRouter.tsx

-import { routes } from '~/router/index';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { authRouterList } from '~/router/index';
+import { useNavigate, useLocation, useRoutes } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
+import { whiteRouterList } from '~/router/router';
 
 function PrivateRouter() {
-  const [router, setRouter] = useState(createBrowserRouter(routes));
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [router, setRouter] = useState(whiteRouterList);
   // 在切换路由之前判断
   const beforeEach = () => {
     // TODO: 判断是否登录 (需要改为实时获取地址栏的路由)
     const path = location.pathname;
     const token = Cookies.get('SHAREFLY-TOKEN');
     if (!token && path !== '/login') {
-      location.replace('/login');
+      navigate('/login', { replace: true });
       return;
     }
   };
   useEffect(() => {
     beforeEach();
-    setRouter(createBrowserRouter(routes)); //不同账号登录时，重新更新路由（有瑕疵）
+    // 整合路由数据
+    authRouterList().then((value) => {
+      const routes = [...value, ...whiteRouterList];
+      setRouter(routes); //不同账号登录时，重新更新路由（有瑕疵）
+    });
   }, [location.pathname]);
 
-  return <RouterProvider router={router} />;
+  return useRoutes(router);
 }
 
 export default PrivateRouter;

src/store/module/userInfo/index.ts

@@ -18,6 +18,9 @@ export const userInfoSlice = createSlice({
       state.roleId = action.payload;
       localStorage.setItem('roleId', action.payload);
     },
+    REMOVE_ROLE_ID() {
+      localStorage.removeItem('roleId');
+    },
     SET_ROLE_LIST(state, action) {
       state.roleList = action.payload;
       localStorage.setItem('roleObj', JSON.stringify(action.payload));
@@ -28,6 +31,7 @@ export const userInfoSlice = createSlice({
   },
 });
 
-export const { SET_USERINFO, SET_ROLE_ID, SET_ROLE_LIST, REMOVE_ROLE_LIST } = userInfoSlice.actions;
+export const { SET_USERINFO, SET_ROLE_ID, SET_ROLE_LIST, REMOVE_ROLE_LIST, REMOVE_ROLE_ID } =
+  userInfoSlice.actions;
 
 export const UserInfo = userInfoSlice.reducer;