perf: add static router

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>

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, // 是否是暗黑模式

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',

src/locales/zh-CN.ts

@@ -74,7 +74,9 @@ export default {
     copyFailed: '拷贝失败',
     footer: '页脚',
     uniqueOpened: '菜单手风琴',
-    tagsViewIcon: '标签页图标'
+    tagsViewIcon: '标签页图标',
+    dynamicRouter: '动态路由',
+    reExperienced: '请重新退出登录体验'
   },
   size: {
     default: '默认',

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) // 动态添加可访问路由表

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
     },

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