refactor(projects): 修改路由为动态注入

src/router/guard/dynamic.ts

@@ -0,0 +1,51 @@
+import { RouteRecordRaw } from 'vue-router';
+import { router } from '@/router';
+import { BasicLayout } from '@/layouts/index';
+import { constantRoutes } from '../routes';
+
+export async function setDynamicRoutes() {
+  const vueRoutes: RouteRecordRaw[] = [
+    {
+      path: '/',
+      name: 'root',
+      redirect: '/test/test1',
+      component: BasicLayout,
+      children: [
+        {
+          path: '/test/test1',
+          name: 'test1',
+          component: () => import(`@/views/test/test1.vue`),
+          meta: {
+            title: '测试1',
+            icon: 'icon-park-outline:game-three',
+            requiresAuth: true,
+          },
+        },
+        {
+          path: '/test/test2',
+          name: 'test2',
+          component: () => import('@/views/test/test2.vue'),
+          meta: {
+            title: '测试2',
+            icon: 'carbon:aperture',
+            requiresAuth: true,
+          },
+        },
+        {
+          path: '/test/test3',
+          name: 'test3',
+          component: () => import('@/views/test/test3.vue'),
+          meta: {
+            title: '测试3',
+            icon: 'icon-park-outline:music-list',
+            requiresAuth: true,
+          },
+        },
+        ...constantRoutes,
+      ],
+    },
+  ];
+  vueRoutes.forEach((route) => {
+    router.addRoute(route);
+  });
+}

src/router/guard/permission.ts

@@ -1,6 +1,7 @@
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { getToken } from '@/utils/auth';
-import { useRouteStore, useAuthStore } from '@/store';
+import { useRouteStore } from '@/store';
+import { setDynamicRoutes } from './dynamic';
 
 export async function createPermissionGuard(
   to: RouteLocationNormalized,
@@ -24,8 +25,9 @@ export async function createPermissionGuard(
       return false;
     }
 
-    // 有登录但是没有路由，初始化路由等
+    // 有登录但是没有路由，初始化路由、侧边菜单等
     await routeStore.initAuthRoute();
+    await setDynamicRoutes();
   }
   // 权限路由已经加载，仍然未找到，重定向到not-found
   // if (to.name === 'not-found-page') {

src/router/index.ts

@@ -1,49 +1,8 @@
 import type { App } from 'vue';
 import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { setupRouterGuard } from './guard';
-import { BasicLayout } from '../layouts/index';
-import { constantRoutes } from './routes';
 
 const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    name: 'root',
-    redirect: '/test/test1',
-    component: BasicLayout,
-    children: [
-      {
-        path: '/test/test1',
-        name: 'test1',
-        component: () => import(`@/views/test/test1.vue`),
-        meta: {
-          title: '测试1',
-          icon: 'icon-park-outline:game-three',
-          requiresAuth: true,
-        },
-      },
-      {
-        path: '/test/test2',
-        name: 'test2',
-        component: () => import('@/views/test/test2.vue'),
-        meta: {
-          title: '测试2',
-          icon: 'carbon:aperture',
-          requiresAuth: true,
-        },
-      },
-      {
-        path: '/test/test3',
-        name: 'test3',
-        component: () => import('@/views/test/test3.vue'),
-        meta: {
-          title: '测试3',
-          icon: 'icon-park-outline:music-list',
-          requiresAuth: true,
-        },
-      },
-      ...constantRoutes,
-    ],
-  },
   {
     path: '/login',
     name: 'login',

src/router/routes/index.ts

@@ -27,10 +27,6 @@ export const constantRoutes = [
   },
   {
     path: '/:pathMatch(.*)*',
-    name: 'not-found-page',
+    redirect: '/no-found',
-    component: () => import('@/views/inherit-page/not-found/index.vue'),
-    meta: {
-      title: '找不到页面',
-    },
   },
 ];

src/store/modules/route.ts

@@ -1,26 +1,25 @@
 import { defineStore } from 'pinia';
 import { renderIcon, getUserInfo } from '@/utils';
 import type { MenuOption } from 'naive-ui';
-// import { useAuthStore } from './auth';
-
-// const authStore = useAuthStore();
 
 interface RoutesStatus {
   isInitAuthRoute: boolean;
   menus: any;
+  userRoutes: any;
 }
 export const useRouteStore = defineStore('route-store', {
   state: (): RoutesStatus => {
     return {
+      userRoutes: getUserInfo().userRoutes,
       isInitAuthRoute: false,
       menus: [],
     };
   },
   actions: {
     async setMenus() {
-      const { userRoutes } = getUserInfo();
+      this.menus = this.transformAuthRoutesToMenus(this.userRoutes);
-      this.menus = this.transformAuthRoutesToMenus(userRoutes);
     },
+
     // 将返回的路由表渲染成侧边栏
     transformAuthRoutesToMenus(userRoutes: Auth.UserInfoPermissions[]): MenuOption[] {
       return userRoutes.map((item) => {
@@ -40,6 +39,22 @@ export const useRouteStore = defineStore('route-store', {
       });
     },
 
+    /* 将路由树转换成一维数组 */
+    FlatAuthRoutes(routes: AppRoute.Route[]) {
+      let result: AppRoute.Route[] = [];
+      routes.forEach((item) => {
+        if (Object.prototype.hasOwnProperty.call(item, 'children')) {
+          const temp = item.children || [];
+          delete item.children;
+          result.push(item);
+          result = [...result, ...this.FlatAuthRoutes(temp)];
+        } else {
+          result.push(item);
+        }
+      });
+      return result;
+    },
+
     async initAuthRoute() {
       await this.setMenus();
       this.isInitAuthRoute = true;

src/types/business.d.ts

@@ -33,5 +33,6 @@ declare namespace Auth {
     path: string;
     meta: AppRoute.RouteMeta;
     children?: UserInfoPermissions[];
+    redirect: string;
   }
 }