feat(router): optimize login jump time

package.json

@@ -24,7 +24,7 @@
     "pinia": "^2.0.11",
     "qrcode.vue": "^3.2.2",
     "tdesign-icons-vue-next": "^0.0.6",
-    "tdesign-vue-next": "0.9.2",
+    "tdesign-vue-next": "0.9.4",
     "tvision-color": "^1.3.1",
     "vue": "^3.2.31",
     "vue-color-kit": "^1.0.5",

src/permission.ts

@@ -16,12 +16,13 @@ router.beforeEach(async (to, from, next) => {
   NProgress.start();
 
   const { token } = userStore;
-
   if (token) {
     if (to.path === '/login') {
       setTimeout(() => {
-        userStore.logout();
+        if (userStore.token) {
-        permissionStore.restore();
+          userStore.logout();
+          permissionStore.restore();
+        }
       });
       next();
       return;
@@ -39,10 +40,13 @@ router.beforeEach(async (to, from, next) => {
 
         await permissionStore.initRoutes(roles);
 
-        next({ ...to });
+        if (router.hasRoute(to.name)) {
+          next();
+        } else {
+          next(`/`);
+        }
       } catch (error) {
         MessagePlugin.error(error);
-        await userStore.removeToken();
         next(`/login?redirect=${to.path}`);
         NProgress.done();
       }

src/router/index.ts

@@ -21,17 +21,18 @@ const defaultRouterList: Array<RouteRecordRaw> = [
     redirect: '/dashboard/base',
     component: () => import('@/layouts/blank.vue'),
   },
+  {
+    path: '/:w+',
+    name: '404Page',
+    redirect: '/result/404',
+  },
 ];
 
-export const page404 = {
+export const allRoutes = [...defaultRouterList, ...asyncRouterList];
-  path: '/:w+',
-  name: '404Page',
-  redirect: '/result/404',
-};
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: defaultRouterList,
+  routes: allRoutes,
   scrollBehavior() {
     return {
       el: '#app',

src/store/modules/permission.ts

@@ -1,16 +1,19 @@
 import { defineStore } from 'pinia';
 import { RouteRecordRaw } from 'vue-router';
-import router, { asyncRouterList, page404 } from '@/router';
+import router, { asyncRouterList } from '@/router';
 import { store } from '@/store';
 
 function filterPermissionsRouters(routes: Array<RouteRecordRaw>, roles: Array<unknown>) {
   const res = [];
+  const removeRoutes = [];
   routes.forEach((route) => {
     const children = [];
     route.children?.forEach((childRouter) => {
       const roleCode = childRouter.meta?.roleCode || childRouter.name;
       if (roles.indexOf(roleCode) !== -1) {
         children.push(childRouter);
+      } else {
+        removeRoutes.push(childRouter);
       }
     });
     if (children.length > 0) {
@@ -18,37 +21,71 @@ function filterPermissionsRouters(routes: Array<RouteRecordRaw>, roles: Array<un
       res.push(route);
     }
   });
-  return res;
+  return { accessedRouters: res, removeRoutes };
 }
 
 export const usePermissionStore = defineStore('permission', {
   state: () => ({
     whiteListRouters: ['/login'],
     routers: [],
+    removeRoutes: [],
   }),
+  getters: {
+    rolesMap: (state) => {
+      const roleMap = [];
+      state.routers.forEach((element, index) => {
+        if (element.meta) {
+          roleMap.push({
+            resourceType: element.meta.title,
+            subResourceList: [],
+          });
+        } else {
+          roleMap.push({
+            subResourceList: [],
+          });
+        }
+        element.children.forEach((item) => {
+          roleMap[index].subResourceList.push({
+            resourceName: item.meta.title,
+            resourceCode: item.name,
+          });
+          if (!roleMap[index].resourceType) {
+            roleMap[index].resourceType = item.meta.title;
+          }
+        });
+      });
+      return roleMap;
+    },
+  },
   actions: {
     async initRoutes(roles: Array<unknown>) {
-      let accessedRouters;
+      let accessedRouters = [];
 
+      // 路由做减法，优化登陆后的跳转时间
+      let removeRoutes = [];
       // special token
-      if (roles.includes('ALL_ROUTERS')) {
+      if (roles.includes('all')) {
         accessedRouters = asyncRouterList;
       } else {
-        accessedRouters = filterPermissionsRouters(asyncRouterList, roles);
+        const res = filterPermissionsRouters(asyncRouterList, roles);
+        accessedRouters = res.accessedRouters;
+        removeRoutes = res.removeRoutes;
       }
 
       this.routers = accessedRouters;
+      this.removeRoutes = removeRoutes;
 
-      // register routers
+      removeRoutes.forEach((item: RouteRecordRaw) => {
-      accessedRouters.concat(page404).forEach((item: RouteRecordRaw) => {
+        if (router.hasRoute(item.name)) {
-        router.addRoute(item);
+          router.removeRoute(item.name);
+        }
       });
     },
     async restore() {
-      this.routers.concat(page404).forEach((item: RouteRecordRaw) => {
+      // 复原route,保证在登陆状态时路由全量
-        if (router.hasRoute(item.name)) router.removeRoute(item.name);
+      this.removeRoutes.forEach((item: RouteRecordRaw) => {
+        router.addRoute(item);
       });
-      this.routers = [];
     },
   },
 });

src/store/modules/user.ts

@@ -57,7 +57,7 @@ export const useUserStore = defineStore('user', {
         if (token === 'main_token') {
           return {
             name: 'td_main',
-            roles: ['ALL_ROUTERS'],
+            roles: ['all'],
           };
         }
         return {