diff --git a/orion-ops-ui/src/components/menu/index.vue b/orion-ops-ui/src/components/menu/index.vue index 9e22cf4e..a2d61d31 100644 --- a/orion-ops-ui/src/components/menu/index.vue +++ b/orion-ops-ui/src/components/menu/index.vue @@ -78,7 +78,6 @@ * 监听路由 设置打开的 key */ listenerRouteChange((newRoute) => { - // TODO const { activeMenu, hideInMenu } = newRoute.meta; if (!hideInMenu || activeMenu) { const menuOpenKeys = findMenuOpenKeys( diff --git a/orion-ops-ui/src/components/tab-bar/index.vue b/orion-ops-ui/src/components/tab-bar/index.vue index 6711c47b..f7786a64 100644 --- a/orion-ops-ui/src/components/tab-bar/index.vue +++ b/orion-ops-ui/src/components/tab-bar/index.vue @@ -21,6 +21,7 @@ @@ -206,7 +203,7 @@ } } - .sperate-line { + .group-line { border-bottom: 1px solid var(--color-neutral-3); } diff --git a/orion-ops-ui/src/hooks/permission.ts b/orion-ops-ui/src/hooks/permission.ts index ac7d3490..17c645fc 100644 --- a/orion-ops-ui/src/hooks/permission.ts +++ b/orion-ops-ui/src/hooks/permission.ts @@ -1,15 +1,28 @@ -import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'; -import { useUserStore } from '@/store'; +import { RouteLocationNormalized, RouteRecordNormalized, RouteRecordRaw } from 'vue-router'; +import { useAppStore, useUserStore } from '@/store'; +import { WHITE_ROUTER_LIST } from '@/router/constants'; export default function usePermission() { + const appStore = useAppStore(); const userStore = useUserStore(); return { /** * 是否可访问路由 */ accessRouter(route: RouteLocationNormalized | RouteRecordRaw) { - // route.name - // TODO + // 检查路由是否存在于授权路由中 + const menuConfig = [...appStore.appAsyncMenus, ...WHITE_ROUTER_LIST]; + let exist = false; + while (menuConfig.length && !exist) { + const element = menuConfig.shift(); + if (element?.name === route.name) exist = true; + if (element?.children) { + menuConfig.push( + ...(element.children as unknown as RouteRecordNormalized[]) + ); + } + } + return exist; }, /** diff --git a/orion-ops-ui/src/router/constants.ts b/orion-ops-ui/src/router/constants.ts index e87166dc..ecc7fc43 100644 --- a/orion-ops-ui/src/router/constants.ts +++ b/orion-ops-ui/src/router/constants.ts @@ -35,13 +35,10 @@ export const DEFAULT_TAB = { /** * router 转 tag */ -// TODO 获取后端meta export const routerToTag = (route: RouteLocationNormalized): TagProps => { - console.log(route); - // TODO 还是得需要 name 和 meta 的映射 const { name, meta, fullPath, query } = route; return { - title: meta.locale || 'me', + title: meta.locale || '', name: String(name), fullPath, query, diff --git a/orion-ops-ui/src/router/guard/router-permission.ts b/orion-ops-ui/src/router/guard/router-permission.ts index 4dde3e5d..e08aafcb 100644 --- a/orion-ops-ui/src/router/guard/router-permission.ts +++ b/orion-ops-ui/src/router/guard/router-permission.ts @@ -1,12 +1,12 @@ -import type { Router, RouteRecordNormalized } from 'vue-router'; +import type { Router } from 'vue-router'; import NProgress from 'nprogress'; import { useAppStore } from '@/store'; import { NOT_FOUND_ROUTER_NAME, WHITE_ROUTER_LIST } from '../constants'; +import usePermission from '@/hooks/permission'; export default function setupPermissionGuard(router: Router) { router.beforeEach(async (to, from, next) => { const appStore = useAppStore(); - // 未加载菜单 并且 不在白名单内 则加载菜单 if ( !appStore.menuFetched && @@ -15,25 +15,20 @@ export default function setupPermissionGuard(router: Router) { // 加载菜单 await appStore.fetchMenuConfig(); } - // 检查路由是否存在于授权路由中 - const menuConfig = [...appStore.appAsyncMenus, ...WHITE_ROUTER_LIST]; - let exist = false; - while (menuConfig.length && !exist) { - const element = menuConfig.shift(); - if (element?.name === to.name) exist = true; - - if (element?.children) { - menuConfig.push( - ...(element.children as unknown as RouteRecordNormalized[]) - ); - } + // 检测是否可以访问 + const permission = usePermission(); + const access = permission.accessRouter(to); + // 刚进入页面时 重定向的 meta 是空的 + if (access && to.meta.locale === undefined && appStore.menuFetched) { + to.meta = to.matched[to.matched.length - 1].meta; } - if (!exist) { - // 页面不存在 - next({ name: NOT_FOUND_ROUTER_NAME }); - } else { + + if (access) { // 正常跳转 next(); + } else { + // 页面不存在 + next({ name: NOT_FOUND_ROUTER_NAME }); } NProgress.done(); }); diff --git a/orion-ops-ui/src/router/routes/modules/user.ts b/orion-ops-ui/src/router/routes/modules/user.ts index d60024a5..8c8739f5 100644 --- a/orion-ops-ui/src/router/routes/modules/user.ts +++ b/orion-ops-ui/src/router/routes/modules/user.ts @@ -15,9 +15,6 @@ const USER: AppRouteRecordRaw = { path: '/user/userChild2', name: 'userChild2', component: () => import('@/views/user/child2/index.vue'), - meta: { - noAffix: true - } }, ], }; diff --git a/orion-ops-ui/src/store/modules/tab-bar/index.ts b/orion-ops-ui/src/store/modules/tab-bar/index.ts index 4441756e..5db1c72c 100644 --- a/orion-ops-ui/src/store/modules/tab-bar/index.ts +++ b/orion-ops-ui/src/store/modules/tab-bar/index.ts @@ -1,6 +1,5 @@ -import type { RouteLocationNormalized } from 'vue-router'; import { defineStore } from 'pinia'; -import { DEFAULT_TAB, DEFAULT_ROUTE_NAME, routerToTag } from '@/router/constants'; +import { DEFAULT_ROUTE_NAME, DEFAULT_TAB } from '@/router/constants'; import { isString } from '@/utils/is'; import { TabBarState, TagProps } from './types'; @@ -23,10 +22,10 @@ const useTabBarStore = defineStore('tabBar', { /** * 添加 tab */ - updateTabList(route: RouteLocationNormalized) { - this.tagList.push(routerToTag(route)); - if (!route.meta.ignoreCache) { - this.cacheTabList.add(route.name as string); + addTab(tag: TagProps, ignoreCache: boolean) { + this.tagList.push(tag); + if (!ignoreCache) { + this.cacheTabList.add(tag.name as string); } }, diff --git a/orion-ops-ui/src/utils/route-listener.ts b/orion-ops-ui/src/utils/route-listener.ts index 8da8cd77..5ec44c9b 100644 --- a/orion-ops-ui/src/utils/route-listener.ts +++ b/orion-ops-ui/src/utils/route-listener.ts @@ -9,9 +9,7 @@ let latestRoute: RouteLocationNormalized; export function setRouteEmitter(to: RouteLocationNormalized) { emitter.emit(key, to); - // TODO 这里寻找 latestRoute = to; - console.log('change', to); } /**