文件路由系统下,用户权限变化后,菜单不更新

src/layouts/components/Menu/index.vue

@@ -169,7 +169,7 @@ provide(rootMenuInjectionKey, reactive({
       'flex-row! w-auto': isMenuPopup && props.mode === 'horizontal',
     }"
   >
-    <template v-for="(item, index) in menu" :key="index">
+    <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
       <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
       <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
     </template>

src/menu/index.ts

@@ -1,4 +1,5 @@
 import MultilevelMenuExample from './modules/multilevel.menu.example'
+import PermissionExample from './modules/permission.example'
 
 import type { Menu } from '#/global'
 
@@ -10,6 +11,7 @@ const menu: Menu.recordMainRaw[] = [
     },
     children: [
       MultilevelMenuExample,
+      PermissionExample,
     ],
   },
 ]

src/menu/modules/permission.example.ts

@@ -0,0 +1,11 @@
+import type { Menu } from '#/global'
+
+const menus: Menu.recordRaw = {
+  path: '/permission_example',
+  meta: {
+    title: '权限验证',
+    icon: 'ri:shield-keyhole-line',
+  },
+}
+
+export default menus

src/mock/app.ts

@@ -180,6 +180,13 @@ export default defineFakeRoute([
                   },
                 ],
               },
+              {
+                path: '/permission_example',
+                meta: {
+                  title: '权限验证',
+                  icon: 'ri:shield-keyhole-line',
+                },
+              },
             ],
           },
         ],

src/router/index.ts

@@ -57,20 +57,22 @@ router.beforeEach(async (to, from, next) => {
       }
     }
     else {
+      // 获取用户权限
+      settingsStore.settings.app.enablePermission && await userStore.getPermissions()
       // 生成动态路由
       switch (settingsStore.settings.app.routeBaseOn) {
         case 'frontend':
-          await routeStore.generateRoutesAtFront(asyncRoutes)
+          routeStore.generateRoutesAtFront(asyncRoutes)
           break
         case 'backend':
           await routeStore.generateRoutesAtBack()
           break
         case 'filesystem':
-          await routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
+          routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
           // 文件系统生成的路由，需要手动生成导航数据
           switch (settingsStore.settings.menu.baseOn) {
             case 'frontend':
-              await menuStore.generateMenusAtFront()
+              menuStore.generateMenusAtFront()
               break
             case 'backend':
               await menuStore.generateMenusAtBack()

src/store/modules/menu.ts

@@ -72,14 +72,14 @@ const useMenuStore = defineStore(
       let returnMenus: Menu.recordMainRaw[] = []
       if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
         returnMenus = convertRouteToMenu(routeStore.routesRaw)
-        // 如果权限功能开启，则需要对导航数据进行筛选过滤
-        if (settingsStore.settings.app.enablePermission) {
-          returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
-        }
       }
       else {
         returnMenus = filesystemMenusRaw.value
       }
+      // 如果权限功能开启，则需要对导航数据进行筛选过滤
+      if (settingsStore.settings.app.enablePermission) {
+        returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
+      }
       return returnMenus
     })
     // 次导航数据
@@ -176,32 +176,12 @@ const useMenuStore = defineStore(
     }
     // 生成导航（前端生成）
     async function generateMenusAtFront() {
-      let accessedMenus
-      // 如果权限功能开启，则需要对导航数据进行筛选过滤
-      if (settingsStore.settings.app.enablePermission) {
-        const permissions = await userStore.getPermissions()
-        accessedMenus = filterAsyncMenus(menu, permissions)
-      }
-      else {
-        accessedMenus = cloneDeep(menu)
-      }
-      filesystemMenusRaw.value = accessedMenus.filter(item => item.children.length !== 0)
+      filesystemMenusRaw.value = menu.filter(item => item.children.length !== 0)
     }
     // 生成导航（后端生成）
     async function generateMenusAtBack() {
       await apiApp.menuList().then(async (res) => {
-        const settingsStore = useSettingsStore()
-        const userStore = useUserStore()
-        let accessedMenus: Menu.recordMainRaw[]
-        // 如果权限功能开启，则需要对导航数据进行筛选过滤
-        if (settingsStore.settings.app.enablePermission) {
-          const permissions = await userStore.getPermissions()
-          accessedMenus = filterAsyncMenus(res.data, permissions)
-        }
-        else {
-          accessedMenus = cloneDeep(res.data)
-        }
-        filesystemMenusRaw.value = accessedMenus.filter(item => item.children.length !== 0)
+        filesystemMenusRaw.value = (res.data as Menu.recordMainRaw[]).filter(item => item.children.length !== 0)
       }).catch(() => {})
     }
     // 设置主导航

src/store/modules/route.ts

@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash-es'
 import type { RouteMeta, RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
-import useUserStore from './user'
 import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
 import apiApp from '@/api/modules/app'
@@ -12,7 +11,6 @@ const useRouteStore = defineStore(
   'route',
   () => {
     const settingsStore = useSettingsStore()
-    const userStore = useUserStore()
 
     const isGenerate = ref(false)
     const routesRaw = ref<Route.recordMainRaw[]>([])
@@ -147,13 +145,10 @@ const useRouteStore = defineStore(
       return routes
     }
 
-    // 根据权限动态生成路由（前端生成）
-    async function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
+    // 生成路由（前端生成）
+    function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
       // 设置 routes 数据
       routesRaw.value = converDeprecatedAttribute(cloneDeep(asyncRoutes) as any)
-      if (settingsStore.settings.app.enablePermission) {
-        await userStore.getPermissions()
-      }
       isGenerate.value = true
     }
     // 格式化后端路由数据
@@ -177,24 +172,18 @@ const useRouteStore = defineStore(
         return route
       })
     }
-    // 根据权限动态生成路由（后端获取）
+    // 生成路由（后端获取）
     async function generateRoutesAtBack() {
-      await apiApp.routeList().then(async (res) => {
+      await apiApp.routeList().then((res) => {
         // 设置 routes 数据
         routesRaw.value = converDeprecatedAttribute(formatBackRoutes(res.data) as any)
-        if (settingsStore.settings.app.enablePermission) {
-          await userStore.getPermissions()
-        }
         isGenerate.value = true
       }).catch(() => {})
     }
-    // 根据权限动态生成路由（文件系统生成）
-    async function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
+    // 生成路由（文件系统生成）
+    function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
       // 设置 routes 数据
       filesystemRoutesRaw.value = cloneDeep(asyncRoutes) as any
-      if (settingsStore.settings.app.enablePermission) {
-        await userStore.getPermissions()
-      }
       isGenerate.value = true
     }
     // 记录 accessRoutes 路由，用于登出时删除路由

src/store/modules/user.ts

@@ -58,7 +58,6 @@ const useUserStore = defineStore(
     async function getPermissions() {
       const res = await apiUser.permission()
       permissions.value = res.data.permissions
-      return permissions.value
     }
     // 修改密码
     async function editPassword(data: {

src/views/permission_example/index.vue

@@ -1,6 +1,6 @@
 <route lang="yaml">
 meta:
-  enabled: false
+  title: 权限验证
 </route>
 
 <script setup lang="ts">
@@ -58,9 +58,13 @@ function permissionCheck2(permissions: string[]) {
       <div v-else>
         <h3>切换帐号</h3>
         <ElRadioGroup v-model="userStore.account" @change="accountChange">
-          <ElRadioButton label="admin" />
-          <ElRadioButton label="test" />
-          <ElRadioButton label="hooray">
+          <ElRadioButton value="admin">
+            admin
+          </ElRadioButton>
+          <ElRadioButton value="test">
+            test
+          </ElRadioButton>
+          <ElRadioButton value="hooray">
             hooray(无权限)
           </ElRadioButton>
         </ElRadioGroup>

src/views/permission_example/test.vue

@@ -1,6 +1,6 @@
 <route lang="yaml">
 meta:
-  enabled: false
+  title: 测试页面
 </route>
 
 <template>