github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:48:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hooray Hu
2024-03-28 21:59:11 +08:00
parent ebf59fda22
commit 093a7923a1
11 changed files with 49 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/components/Menu/index.vue
+1 -1
View File
@@ -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
+2
View File
@@ -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
+11
View File
@@ -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
+7
View File
@@ -180,6 +180,13 @@ export default defineFakeRoute([
},
],
},
{
path: '/permission_example',
meta: {
title: '权限验证',
icon: 'ri:shield-keyhole-line',
},
},
],
},
],
src/router/index.ts
+5 -3
View File
@@ -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
+6 -26
View File
@@ -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
+6 -17
View File
@@ -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
-1
View File
@@ -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/mock_example/index.vue
+2 -2
View File
@@ -10,11 +10,11 @@ import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
function getPermission() {
userStore.getPermissions().then((res) => {
userStore.getPermissions().then(() => {
ElNotification({
title: '当前用户权限',
dangerouslyUseHTMLString: true,
message: res.map(p => `<p>${p}</p>`).join(''),
message: userStore.permissions.map(p => `<p>${p}</p>`).join(''),
})
})
}
src/views/permission_example/index.vue
+8 -4
View File
@@ -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 -1
View File
@@ -1,6 +1,6 @@
<route lang="yaml">
meta:
enabled: false
title: 测试页面
</route>
<template>