From 55522b0661a8df3ad3c8afafcc9f8fcb162c5a00 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Sat, 30 Jul 2022 10:05:53 +0800
Subject: [PATCH] perf: add static router

---
 .../Setting/src/components/InterfaceDisplay.vue   | 15 ++++++++++++++-
 src/config/app.ts                                 |  2 ++
 src/locales/en.ts                                 |  4 +++-
 src/locales/zh-CN.ts                              |  4 +++-
 src/permission.ts                                 | 11 ++++++++---
 src/store/modules/app.ts                          |  7 +++++++
 src/views/Login/components/LoginForm.vue          | 12 +++++++++++-
 7 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/components/Setting/src/components/InterfaceDisplay.vue b/src/components/Setting/src/components/InterfaceDisplay.vue
index 8112e9a..8050939 100644
--- a/src/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/components/Setting/src/components/InterfaceDisplay.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ElSwitch } from 'element-plus'
+import { ElSwitch, ElMessage } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
 import { computed, ref, watch } from 'vue'
@@ -107,6 +107,14 @@ const greyModeChange = (show: boolean) => {
   appStore.setGreyMode(show)
 }
 
+// 动态路由
+const dynamicRouter = ref(appStore.getDynamicRouter)
+
+const dynamicRouterChange = (show: boolean) => {
+  ElMessage.info(t('setting.reExperienced'))
+  appStore.setDynamicRouter(show)
+}
+
 const layout = computed(() => appStore.getLayout)
 
 watch(
@@ -185,5 +193,10 @@ watch(
       <span class="text-14px">{{ t('setting.greyMode') }}</span>
       <ElSwitch v-model="greyMode" @change="greyModeChange" />
     </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.dynamicRouter') }}</span>
+      <ElSwitch v-model="dynamicRouter" @change="dynamicRouterChange" />
+    </div>
   </div>
 </template>
diff --git a/src/config/app.ts b/src/config/app.ts
index e4d2aad..2c51654 100644
--- a/src/config/app.ts
+++ b/src/config/app.ts
@@ -34,6 +34,7 @@ export interface AppState {
   logo: boolean
   fixedHeader: boolean
   greyMode: boolean
+  dynamicRouter: boolean
   pageLoading: boolean
   layout: LayoutType
   title: string
@@ -67,6 +68,7 @@ export const appModules: AppState = {
   fixedHeader: true, // 固定toolheader
   footer: true, // 显示页脚
   greyMode: false, // 是否开始灰色模式，用于特殊悼念日
+  dynamicRouter: wsCache.get('dynamicRouter') || false, // 是否动态路由
 
   layout: wsCache.get('layout') || 'classic', // layout布局
   isDark: wsCache.get('isDark') || false, // 是否是暗黑模式
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 24597ea..68f706d 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -74,7 +74,9 @@ export default {
     copyFailed: 'Copy failed',
     footer: 'Footer',
     uniqueOpened: 'Unique opened',
-    tagsViewIcon: 'Tags view icon'
+    tagsViewIcon: 'Tags view icon',
+    dynamicRouter: 'Dynamic router',
+    reExperienced: 'Please exit the login experience again'
   },
   size: {
     default: 'Default',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 51abe94..a33a53f 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -74,7 +74,9 @@ export default {
     copyFailed: '拷贝失败',
     footer: '页脚',
     uniqueOpened: '菜单手风琴',
-    tagsViewIcon: '标签页图标'
+    tagsViewIcon: '标签页图标',
+    dynamicRouter: '动态路由',
+    reExperienced: '请重新退出登录体验'
   },
   size: {
     default: '默认',
diff --git a/src/permission.ts b/src/permission.ts
index e7e7ecf..7c7dc28 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -48,9 +48,14 @@ router.beforeEach(async (to, from, next) => {
       const roleRouters = wsCache.get('roleRouters') || []
       const userInfo = wsCache.get(appStore.getUserInfo)
 
-      userInfo.role === 'admin'
-        ? await permissionStore.generateRoutes('admin', roleRouters as AppCustomRouteRecordRaw[])
-        : await permissionStore.generateRoutes('test', roleRouters as string[])
+      // 是否使用动态路由
+      if (appStore.getDynamicRouter) {
+        userInfo.role === 'admin'
+          ? await permissionStore.generateRoutes('admin', roleRouters as AppCustomRouteRecordRaw[])
+          : await permissionStore.generateRoutes('test', roleRouters as string[])
+      } else {
+        await permissionStore.generateRoutes('none')
+      }
 
       permissionStore.getAddRouters.forEach((route) => {
         router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 8f00ed1..beb6884 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -54,6 +54,9 @@ export const useAppStore = defineStore({
     getGreyMode(): boolean {
       return this.greyMode
     },
+    getDynamicRouter(): boolean {
+      return this.dynamicRouter
+    },
     getPageLoading(): boolean {
       return this.pageLoading
     },
@@ -125,6 +128,10 @@ export const useAppStore = defineStore({
     setGreyMode(greyMode: boolean) {
       this.greyMode = greyMode
     },
+    setDynamicRouter(dynamicRouter: boolean) {
+      wsCache.set('dynamicRouter', dynamicRouter)
+      this.dynamicRouter = dynamicRouter
+    },
     setPageLoading(pageLoading: boolean) {
       this.pageLoading = pageLoading
     },
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 5e59845..5bceb8a 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -130,7 +130,17 @@ const signIn = async () => {
 
         if (res) {
           wsCache.set(appStore.getUserInfo, res.data)
-          getRole()
+          // 是否使用动态路由
+          if (appStore.getDynamicRouter) {
+            getRole()
+          } else {
+            await permissionStore.generateRoutes('none').catch(() => {})
+            permissionStore.getAddRouters.forEach((route) => {
+              addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
+            })
+            permissionStore.setIsAddRouters(true)
+            push({ path: redirect.value || permissionStore.addRouters[0].path })
+          }
         }
       } finally {
         loading.value = false