路由 meta.auth 保持元信息默认合并行为,路由访问改为通过 route.matched 进行逐级鉴权

This commit is contained in:
Hooray Hu
2024-04-09 15:13:32 +08:00
parent afe7b2e442
commit 3210178aa3
2 changed files with 14 additions and 9 deletions
+10 -2
View File
@@ -6,9 +6,17 @@ import eventBus from './utils/eventBus'
import Provider from './ui-provider/index.vue'
import useSettingsStore from '@/store/modules/settings'
const route = useRoute()
const settingsStore = useSettingsStore()
const { auth } = useAuth()
const isAuth = computed(() => {
return route.matched.every((item) => {
return auth(item.meta.auth ?? '')
})
})
// 侧边栏主导航当前实际宽度
const mainSidebarActualWidth = computed(() => {
let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
@@ -61,13 +69,13 @@ import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
<template>
<Provider>
<RouterView
v-slot="{ Component, route }"
v-slot="{ Component }"
:style="{
'--g-main-sidebar-actual-width': mainSidebarActualWidth,
'--g-sub-sidebar-actual-width': subSidebarActualWidth,
}"
>
<component :is="Component" v-if="auth(route.meta.auth ?? '')" />
<component :is="Component" v-if="isAuth" />
<NotAllowed v-else />
</RouterView>
<SystemInfo />
+4 -7
View File
@@ -1,5 +1,5 @@
import { cloneDeep } from 'lodash-es'
import type { RouteMeta, RouteRecordRaw } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import useSettingsStore from './settings'
import { resolveRoutePath } from '@/utils'
import { systemRoutes } from '@/router/routes'
@@ -25,16 +25,15 @@ const useRouteStore = defineStore(
title: route.meta?.title,
icon: route.meta?.icon,
hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
}], route.path, route.meta?.auth)
}], route.path)
}
return route
}
function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = '', baseAuth: RouteMeta['auth']): RouteRecordRaw[] {
function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): RouteRecordRaw[] {
const res: RouteRecordRaw[] = []
routes.forEach((route) => {
if (route.children) {
const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
const childrenBaseAuth = !baseAuth || baseAuth === '' || baseAuth?.length === 0 ? route.meta?.auth : baseAuth
const tmpBreadcrumb = cloneDeep(breadcrumb)
tmpBreadcrumb.push({
path: childrenBaseUrl,
@@ -47,11 +46,10 @@ const useRouteStore = defineStore(
if (!tmpRoute.meta) {
tmpRoute.meta = {}
}
tmpRoute.meta.auth = childrenBaseAuth
tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
delete tmpRoute.children
res.push(tmpRoute)
const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl, childrenBaseAuth)
const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
childrenRoutes.forEach((item) => {
// 如果 path 一样则覆盖,因为子路由的 path 可能设置为空,导致和父路由一样,直接注册会提示路由重复
if (res.some(v => v.path === item.path)) {
@@ -80,7 +78,6 @@ const useRouteStore = defineStore(
if (!tmpRoute.meta) {
tmpRoute.meta = {}
}
tmpRoute.meta.auth = !baseAuth || baseAuth === '' || baseAuth?.length === 0 ? tmpRoute.meta?.auth : baseAuth
tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
res.push(tmpRoute)
}