Merge pull request #86 from Tencent/feat/routers/optimizeJumper

feat/routers/optimize

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,13 +16,10 @@ router.beforeEach(async (to, from, next) => {
   NProgress.start();
 
   const { token } = userStore;
-
   if (token) {
     if (to.path === '/login') {
-      setTimeout(() => {
-        userStore.logout();
-        permissionStore.restore();
-      });
+      userStore.logout();
+      permissionStore.restore();
       next();
       return;
     }
@@ -39,10 +36,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 = {
-  path: '/:w+',
-  name: '404Page',
-  redirect: '/result/404',
-};
+export const allRoutes = [...defaultRouterList, ...asyncRouterList];
 
 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,42 @@ 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: [],
   }),
   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
-      accessedRouters.concat(page404).forEach((item: RouteRecordRaw) => {
-        router.addRoute(item);
+      removeRoutes.forEach((item: RouteRecordRaw) => {
+        if (router.hasRoute(item.name)) {
+          router.removeRoute(item.name);
+        }
       });
     },
     async restore() {
-      this.routers.concat(page404).forEach((item: RouteRecordRaw) => {
-        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 {