feat(projects): 动态路由根路由重定向只需取决于后端返回的路由首页

ISSUES CLOSED: \

.env

@@ -9,4 +9,5 @@ VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 # 权限路由模式: static ｜ dynamic
 VITE_AUTH_ROUTE_MODE=dynamic
 
+# 路由首页(根路由重定向), 用于static模式的权限路由，dynamic模式取决于后端返回的路由首页
 VITE_ROUTE_HOME_PATH=/dashboard/analysis

src/router/guard/dynamic.ts

@@ -31,6 +31,14 @@ export async function createDynamicRouteGuard(
 
     if (to.name === routeName('not-found-page')) {
       // 动态路由没有加载导致被not-found-page路由捕获，等待权限路由加载好了，回到之前的路由
+
+      // 若路由是从根路由重定向过来的，重新回到根路由
+      const ROOT_ROUTE_NAME: AuthRoute.RouteKey = 'root';
+      if (to.redirectedFrom?.name === ROOT_ROUTE_NAME) {
+        next({ path: '/', replace: true, query: to.query });
+        return false;
+      }
+
       next({ path: to.fullPath, replace: true, query: to.query });
       return false;
     }

src/router/routes/index.ts

@@ -1,15 +1,18 @@
 import { getLoginModuleRegExp } from '@/utils';
 
-/** 固定的路由 */
-export const constantRoutes: AuthRoute.Route[] = [
-  {
+/** 根路由: / */
+export const ROOT_ROUTE: AuthRoute.Route = {
   name: 'root',
   path: '/',
   redirect: import.meta.env.VITE_ROUTE_HOME_PATH,
   meta: {
     title: 'Root'
   }
-  },
+};
+
+/** 固定的路由 */
+export const constantRoutes: AuthRoute.Route[] = [
+  ROOT_ROUTE,
   {
     name: 'login',
     path: '/login',

src/store/modules/route/index.ts

@@ -1,14 +1,16 @@
 import { defineStore } from 'pinia';
-import { router, constantRoutes, routes as staticRoutes } from '@/router';
+import { router, ROOT_ROUTE, constantRoutes, routes as staticRoutes } from '@/router';
 import { fetchUserRoutes } from '@/service';
 import {
   getUserInfo,
   transformAuthRouteToMenu,
   transformAuthRoutesToVueRoutes,
+  transformAuthRouteToVueRoute,
   transformAuthRoutesToSearchMenus,
   getCacheRoutes,
   filterAuthRoutesByUserPermission,
   transformRoutePathToRouteName,
+  transformRouteNameToRoutePath,
   getConstantRouteNames
 } from '@/utils';
 import { useAuthStore } from '../auth';
@@ -75,12 +77,24 @@ export const useRouteStore = defineStore('route-store', {
 
       this.cacheRoutes = getCacheRoutes(vueRoutes);
     },
+    /** 动态路由模式下：更新根路由的重定向 */
+    handleUpdateRootRedirect(routeKey: AuthRoute.RouteKey) {
+      if (routeKey === 'root' || routeKey === 'not-found-page') {
+        throw Error('routeKey的值不能为root或者not-found-page');
+      }
+      const rootRoute: AuthRoute.Route = { ...ROOT_ROUTE, redirect: transformRouteNameToRoutePath(routeKey) };
+      const rootRouteName: AuthRoute.RouteKey = 'root';
+      router.removeRoute(rootRouteName);
+      const rootVueRoute = transformAuthRouteToVueRoute(rootRoute)[0];
+      router.addRoute(rootVueRoute);
+    },
     /** 初始化动态路由 */
     async initDynamicRoute() {
       const { userId } = getUserInfo();
       const { data } = await fetchUserRoutes(userId);
       if (data) {
         this.routeHomeName = data.home;
+        this.handleUpdateRootRedirect(data.home);
         this.handleAuthRoutes(data.routes);
       }
     },

src/utils/router/helpers.ts

@@ -82,7 +82,7 @@ type ComponentAction = Record<AuthRoute.RouteComponent, () => void>;
  * 将单个权限路由转换成vue路由
  * @param item - 单个权限路由
  */
-function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
+export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
   const resultRoute: RouteRecordRaw[] = [];
 
   const itemRoute = { ...item } as RouteRecordRaw;