Skip to content

Commit 093a792

Browse files
hoorayhooray
committed
文件路由系统下,用户权限变化后,菜单不更新
1 parent ebf59fd commit 093a792

File tree

11 files changed

+49
-55
lines changed

11 files changed

+49
-55
lines changed

‎src/layouts/components/Menu/index.vue

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

‎src/menu/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import MultilevelMenuExample from './modules/multilevel.menu.example'
2+
import PermissionExample from './modules/permission.example'
23

34
import type { Menu } from '#/global'
45

@@ -10,6 +11,7 @@ const menu: Menu.recordMainRaw[] = [
1011
},
1112
children: [
1213
MultilevelMenuExample,
14+
PermissionExample,
1315
],
1416
},
1517
]

‎src/menu/modules/permission.example.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Menu } from '#/global'
2+
3+
const menus: Menu.recordRaw = {
4+
path: '/permission_example',
5+
meta: {
6+
title: '权限验证',
7+
icon: 'ri:shield-keyhole-line',
8+
},
9+
}
10+
11+
export default menus

‎src/mock/app.ts

+7
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,13 @@ export default defineFakeRoute([
180180
},
181181
],
182182
},
183+
{
184+
path: '/permission_example',
185+
meta: {
186+
title: '权限验证',
187+
icon: 'ri:shield-keyhole-line',
188+
},
189+
},
183190
],
184191
},
185192
],

‎src/router/index.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -57,20 +57,22 @@ router.beforeEach(async (to, from, next) => {
5757
}
5858
}
5959
else {
60+
// 获取用户权限
61+
settingsStore.settings.app.enablePermission && await userStore.getPermissions()
6062
// 生成动态路由
6163
switch (settingsStore.settings.app.routeBaseOn) {
6264
case 'frontend':
63-
await routeStore.generateRoutesAtFront(asyncRoutes)
65+
routeStore.generateRoutesAtFront(asyncRoutes)
6466
break
6567
case 'backend':
6668
await routeStore.generateRoutesAtBack()
6769
break
6870
case 'filesystem':
69-
await routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
71+
routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
7072
// 文件系统生成的路由，需要手动生成导航数据
7173
switch (settingsStore.settings.menu.baseOn) {
7274
case 'frontend':
73-
await menuStore.generateMenusAtFront()
75+
menuStore.generateMenusAtFront()
7476
break
7577
case 'backend':
7678
await menuStore.generateMenusAtBack()

‎src/store/modules/menu.ts

+6-26
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,14 @@ const useMenuStore = defineStore(
7272
let returnMenus: Menu.recordMainRaw[] = []
7373
if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
7474
returnMenus = convertRouteToMenu(routeStore.routesRaw)
75-
// 如果权限功能开启，则需要对导航数据进行筛选过滤
76-
if (settingsStore.settings.app.enablePermission) {
77-
returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
78-
}
7975
}
8076
else {
8177
returnMenus = filesystemMenusRaw.value
8278
}
79+
// 如果权限功能开启，则需要对导航数据进行筛选过滤
80+
if (settingsStore.settings.app.enablePermission) {
81+
returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
82+
}
8383
return returnMenus
8484
})
8585
// 次导航数据
@@ -176,32 +176,12 @@ const useMenuStore = defineStore(
176176
}
177177
// 生成导航（前端生成）
178178
async function generateMenusAtFront() {
179-
let accessedMenus
180-
// 如果权限功能开启，则需要对导航数据进行筛选过滤
181-
if (settingsStore.settings.app.enablePermission) {
182-
const permissions = await userStore.getPermissions()
183-
accessedMenus = filterAsyncMenus(menu, permissions)
184-
}
185-
else {
186-
accessedMenus = cloneDeep(menu)
187-
}
188-
filesystemMenusRaw.value = accessedMenus.filter(item => item.children.length !== 0)
179+
filesystemMenusRaw.value = menu.filter(item => item.children.length !== 0)
189180
}
190181
// 生成导航（后端生成）
191182
async function generateMenusAtBack() {
192183
await apiApp.menuList().then(async (res) => {
193-
const settingsStore = useSettingsStore()
194-
const userStore = useUserStore()
195-
let accessedMenus: Menu.recordMainRaw[]
196-
// 如果权限功能开启，则需要对导航数据进行筛选过滤
197-
if (settingsStore.settings.app.enablePermission) {
198-
const permissions = await userStore.getPermissions()
199-
accessedMenus = filterAsyncMenus(res.data, permissions)
200-
}
201-
else {
202-
accessedMenus = cloneDeep(res.data)
203-
}
204-
filesystemMenusRaw.value = accessedMenus.filter(item => item.children.length !== 0)
184+
filesystemMenusRaw.value = (res.data as Menu.recordMainRaw[]).filter(item => item.children.length !== 0)
205185
}).catch(() => {})
206186
}
207187
// 设置主导航

‎src/store/modules/route.ts

+6-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { cloneDeep } from 'lodash-es'
22
import type { RouteMeta, RouteRecordRaw } from 'vue-router'
33
import useSettingsStore from './settings'
4-
import useUserStore from './user'
54
import { resolveRoutePath } from '@/utils'
65
import { systemRoutes } from '@/router/routes'
76
import apiApp from '@/api/modules/app'
@@ -12,7 +11,6 @@ const useRouteStore = defineStore(
1211
'route',
1312
() => {
1413
const settingsStore = useSettingsStore()
15-
const userStore = useUserStore()
1614

1715
const isGenerate = ref(false)
1816
const routesRaw = ref<Route.recordMainRaw[]>([])
@@ -147,13 +145,10 @@ const useRouteStore = defineStore(
147145
return routes
148146
}
149147

150-
// 根据权限动态生成路由（前端生成）
151-
async function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
148+
// 生成路由（前端生成）
149+
function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
152150
// 设置 routes 数据
153151
routesRaw.value = converDeprecatedAttribute(cloneDeep(asyncRoutes) as any)
154-
if (settingsStore.settings.app.enablePermission) {
155-
await userStore.getPermissions()
156-
}
157152
isGenerate.value = true
158153
}
159154
// 格式化后端路由数据
@@ -177,24 +172,18 @@ const useRouteStore = defineStore(
177172
return route
178173
})
179174
}
180-
// 根据权限动态生成路由（后端获取）
175+
// 生成路由（后端获取）
181176
async function generateRoutesAtBack() {
182-
await apiApp.routeList().then(async (res) => {
177+
await apiApp.routeList().then((res) => {
183178
// 设置 routes 数据
184179
routesRaw.value = converDeprecatedAttribute(formatBackRoutes(res.data) as any)
185-
if (settingsStore.settings.app.enablePermission) {
186-
await userStore.getPermissions()
187-
}
188180
isGenerate.value = true
189181
}).catch(() => {})
190182
}
191-
// 根据权限动态生成路由（文件系统生成）
192-
async function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
183+
// 生成路由（文件系统生成）
184+
function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
193185
// 设置 routes 数据
194186
filesystemRoutesRaw.value = cloneDeep(asyncRoutes) as any
195-
if (settingsStore.settings.app.enablePermission) {
196-
await userStore.getPermissions()
197-
}
198187
isGenerate.value = true
199188
}
200189
// 记录 accessRoutes 路由，用于登出时删除路由

‎src/store/modules/user.ts

-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ const useUserStore = defineStore(
5858
async function getPermissions() {
5959
const res = await apiUser.permission()
6060
permissions.value = res.data.permissions
61-
return permissions.value
6261
}
6362
// 修改密码
6463
async function editPassword(data: {

‎src/views/mock_example/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import useUserStore from '@/store/modules/user'
1010
const userStore = useUserStore()
1111
1212
function getPermission() {
13-
userStore.getPermissions().then((res) => {
13+
userStore.getPermissions().then(() => {
1414
ElNotification({
1515
title: '当前用户权限',
1616
dangerouslyUseHTMLString: true,
17-
message: res.map(p => `<p>${p}</p>`).join(''),
17+
message: userStore.permissions.map(p => `<p>${p}</p>`).join(''),
1818
})
1919
})
2020
}

‎src/views/permission_example/index.vue

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<route lang="yaml">
22
meta:
3-
enabled: false
3+
title: 权限验证
44
</route>
55

66
<script setup lang="ts">
@@ -58,9 +58,13 @@ function permissionCheck2(permissions: string[]) {
5858
<div v-else>
5959
<h3>切换帐号</h3>
6060
<ElRadioGroup v-model="userStore.account" @change="accountChange">
61-
<ElRadioButton label="admin" />
62-
<ElRadioButton label="test" />
63-
<ElRadioButton label="hooray">
61+
<ElRadioButton value="admin">
62+
admin
63+
</ElRadioButton>
64+
<ElRadioButton value="test">
65+
test
66+
</ElRadioButton>
67+
<ElRadioButton value="hooray">
6468
hooray(无权限)
6569
</ElRadioButton>
6670
</ElRadioGroup>

‎src/views/permission_example/test.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<route lang="yaml">
22
meta:
3-
enabled: false
3+
title: 测试页面
44
</route>
55

66
<template>

0 commit comments

Comments
 (0)