From 972b79adf32f98c5ccd42b83975148f068ca9b35 Mon Sep 17 00:00:00 2001
From: hibiki <hibikihe@gmail.com>
Date: Fri, 16 Dec 2022 17:44:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dvue=20keep-alive=E5=9C=A8?=
 =?UTF-8?q?=E5=A4=9A=E5=B1=82=E8=B7=AF=E7=94=B1=E5=B5=8C=E5=A5=97=E4=B8=8D?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/permission.ts          |  6 ++--
 admin/src/router/index.ts        | 47 +++++++++++++++++++++++++++++++-
 admin/src/stores/modules/user.ts |  9 ++++--
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/admin/src/permission.ts b/admin/src/permission.ts
index decf89b36..3530c2de2 100644
--- a/admin/src/permission.ts
+++ b/admin/src/permission.ts
@@ -41,9 +41,9 @@ router.beforeEach(async (to, from, next) => {
         } else {
             try {
                 await userStore.getUserInfo()
-                const routes = userStore.routes
+                const flatRoutes = userStore.flatRoutes
                 // 找到第一个有效路由
-                const routeName = findFirstValidRoute(routes)
+                const routeName = findFirstValidRoute(flatRoutes)
                 // 没有有效路由跳转到403页面
                 if (!routeName) {
                     clearAuthInfo()
@@ -55,7 +55,7 @@ router.beforeEach(async (to, from, next) => {
 
                 // 动态添加index路由
                 router.addRoute(INDEX_ROUTE)
-                routes.forEach((route: any) => {
+                flatRoutes.forEach((route: any) => {
                     // https 则不插入
                     if (isExternal(route.path)) {
                         return
diff --git a/admin/src/router/index.ts b/admin/src/router/index.ts
index ba004d088..1eefbc62e 100644
--- a/admin/src/router/index.ts
+++ b/admin/src/router/index.ts
@@ -11,7 +11,18 @@ const modules = import.meta.glob('/src/views/**/*.vue')
 export function getModulesKey() {
     return Object.keys(modules).map((item) => item.replace('/src/views/', '').replace('.vue', ''))
 }
-
+// 生成扁平化路由配置对象
+export function createFlatAsyncRoutes(routes: any[], parentPath: string = '/') {
+    let routeRecords: any[] = [];
+    routes.forEach((route) => {
+        if (route.type === MenuEnum['CATALOGUE']) {
+            routeRecords.push(...createFlatAsyncRoutes(route.children, parentPath + route.paths + '/'));
+        } else {
+            routeRecords.push(createFlatRouteRecord(route, parentPath));
+        }
+    });
+    return routeRecords;
+}
 // 过滤路由所需要的数据
 export function filterAsyncRoutes(routes: any[], firstRoute = true) {
     return routes.map((route) => {
@@ -53,7 +64,41 @@ export function createRouteRecord(route: any, firstRoute: boolean): RouteRecordR
     }
     return routeRecord
 }
+// 创建一条扁平化路由记录
+export function createFlatRouteRecord(route: any, parentPath: string): RouteRecordRaw {
 
+    //@ts-ignore
+    const routeRecord: RouteRecordRaw = {
+        path: parentPath + route.paths,
+        name: Symbol(route.paths),
+        meta: {
+            hidden: !route.is_show,
+            keepAlive: !!route.is_cache,
+            title: route.name,
+            perms: route.perms,
+            query: route.params,
+            icon: route.icon,
+            type: route.type,
+            activeMenu: route.selected
+        }
+    };
+    //@ts-ignore
+    if ((!(routeRecord.meta.hidden)) && routeRecord.meta.keepAlive) {
+        console.log(routeRecord.path);
+    }
+    switch (route.type) {
+        case MenuEnum.CATALOGUE:
+            // routeRecord.component = firstRoute ? LAYOUT : RouterView;
+            // if (!route.children) {
+            // 	routeRecord.component = RouterView;
+            // }
+            break;
+        case MenuEnum.MENU:
+            routeRecord.component = loadRouteView(route.component);
+            break;
+    }
+    return routeRecord;
+}
 // 动态加载组件
 export function loadRouteView(component: string) {
     try {
diff --git a/admin/src/stores/modules/user.ts b/admin/src/stores/modules/user.ts
index 27b4ebcb5..d82db53fe 100644
--- a/admin/src/stores/modules/user.ts
+++ b/admin/src/stores/modules/user.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import cache from '@/utils/cache'
 import type { RouteRecordRaw } from 'vue-router'
 import { getUserInfo, login, logout } from '@/api/user'
-import router, { filterAsyncRoutes } from '@/router'
+import router, { filterAsyncRoutes, createFlatAsyncRoutes } from '@/router'
 import { TOKEN_KEY } from '@/enums/cacheEnums'
 import { PageEnum } from '@/enums/pageEnum'
 import { clearAuthInfo, getToken } from '@/utils/auth'
@@ -10,6 +10,8 @@ export interface UserState {
     token: string
     userInfo: Record<string, any>
     routes: RouteRecordRaw[]
+    // 扁平化的路由
+    flatRoutes: RouteRecordRaw[];
     perms: string[]
 }
 
@@ -21,6 +23,8 @@ const useUserStore = defineStore({
         userInfo: {},
         // 路由
         routes: [],
+        // 扁平化的路由
+        flatRoutes: [],
         // 权限
         perms: []
     }),
@@ -66,9 +70,10 @@ const useUserStore = defineStore({
             return new Promise((resolve, reject) => {
                 getUserInfo()
                     .then((data) => {
-                        this.userInfo = data.user
+                        this.userInfo = data.userz
                         this.perms = data.permissions
                         this.routes = filterAsyncRoutes(data.menu)
+                        this.flatRoutes = createFlatAsyncRoutes(data.menu);
                         resolve(data)
                     })
                     .catch((error) => {
-- 
Gitee