diff --git a/admin/src/permission.ts b/admin/src/permission.ts index decf89b36f7dacd0122e1dbf65f13552accd7c22..3530c2de273b113e974e4918474f3af27c4f27a7 100644 --- a/admin/src/permission.ts +++ b/admin/src/permission.ts @@ -41,9 +41,9 @@ router.beforeEach(async (to, from, next) => { } else { try { await userStore.getUserInfo() - const routes = userStore.routes + const flatRoutes = userStore.flatRoutes // 找到第一个有效路由 - const routeName = findFirstValidRoute(routes) + const routeName = findFirstValidRoute(flatRoutes) // 没有有效路由跳转到403页面 if (!routeName) { clearAuthInfo() @@ -55,7 +55,7 @@ router.beforeEach(async (to, from, next) => { // 动态添加index路由 router.addRoute(INDEX_ROUTE) - routes.forEach((route: any) => { + flatRoutes.forEach((route: any) => { // https 则不插入 if (isExternal(route.path)) { return diff --git a/admin/src/router/index.ts b/admin/src/router/index.ts index ba004d0881f0fa43b21b20d809b107791328d848..1eefbc62e2e1e7c7f00e0b411182c180563291ae 100644 --- a/admin/src/router/index.ts +++ b/admin/src/router/index.ts @@ -11,7 +11,18 @@ const modules = import.meta.glob('/src/views/**/*.vue') export function getModulesKey() { return Object.keys(modules).map((item) => item.replace('/src/views/', '').replace('.vue', '')) } - +// 生成扁平化路由配置对象 +export function createFlatAsyncRoutes(routes: any[], parentPath: string = '/') { + let routeRecords: any[] = []; + routes.forEach((route) => { + if (route.type === MenuEnum['CATALOGUE']) { + routeRecords.push(...createFlatAsyncRoutes(route.children, parentPath + route.paths + '/')); + } else { + routeRecords.push(createFlatRouteRecord(route, parentPath)); + } + }); + return routeRecords; +} // 过滤路由所需要的数据 export function filterAsyncRoutes(routes: any[], firstRoute = true) { return routes.map((route) => { @@ -53,7 +64,41 @@ export function createRouteRecord(route: any, firstRoute: boolean): RouteRecordR } return routeRecord } +// 创建一条扁平化路由记录 +export function createFlatRouteRecord(route: any, parentPath: string): RouteRecordRaw { + //@ts-ignore + const routeRecord: RouteRecordRaw = { + path: parentPath + route.paths, + name: Symbol(route.paths), + meta: { + hidden: !route.is_show, + keepAlive: !!route.is_cache, + title: route.name, + perms: route.perms, + query: route.params, + icon: route.icon, + type: route.type, + activeMenu: route.selected + } + }; + //@ts-ignore + if ((!(routeRecord.meta.hidden)) && routeRecord.meta.keepAlive) { + console.log(routeRecord.path); + } + switch (route.type) { + case MenuEnum.CATALOGUE: + // routeRecord.component = firstRoute ? LAYOUT : RouterView; + // if (!route.children) { + // routeRecord.component = RouterView; + // } + break; + case MenuEnum.MENU: + routeRecord.component = loadRouteView(route.component); + break; + } + return routeRecord; +} // 动态加载组件 export function loadRouteView(component: string) { try { diff --git a/admin/src/stores/modules/user.ts b/admin/src/stores/modules/user.ts index 27b4ebcb56168b5e998800ce60362996e8c70b5e..d82db53fefbaf741b06f32eaae6dd627deef9011 100644 --- a/admin/src/stores/modules/user.ts +++ b/admin/src/stores/modules/user.ts @@ -2,7 +2,7 @@ import { defineStore } from 'pinia' import cache from '@/utils/cache' import type { RouteRecordRaw } from 'vue-router' import { getUserInfo, login, logout } from '@/api/user' -import router, { filterAsyncRoutes } from '@/router' +import router, { filterAsyncRoutes, createFlatAsyncRoutes } from '@/router' import { TOKEN_KEY } from '@/enums/cacheEnums' import { PageEnum } from '@/enums/pageEnum' import { clearAuthInfo, getToken } from '@/utils/auth' @@ -10,6 +10,8 @@ export interface UserState { token: string userInfo: Record routes: RouteRecordRaw[] + // 扁平化的路由 + flatRoutes: RouteRecordRaw[]; perms: string[] } @@ -21,6 +23,8 @@ const useUserStore = defineStore({ userInfo: {}, // 路由 routes: [], + // 扁平化的路由 + flatRoutes: [], // 权限 perms: [] }), @@ -66,9 +70,10 @@ const useUserStore = defineStore({ return new Promise((resolve, reject) => { getUserInfo() .then((data) => { - this.userInfo = data.user + this.userInfo = data.userz this.perms = data.permissions this.routes = filterAsyncRoutes(data.menu) + this.flatRoutes = createFlatAsyncRoutes(data.menu); resolve(data) }) .catch((error) => {