diff --git a/src/router/guard/dynamic.ts b/src/router/guard/dynamic.ts new file mode 100644 index 0000000..2d6065e --- /dev/null +++ b/src/router/guard/dynamic.ts @@ -0,0 +1,51 @@ +import { RouteRecordRaw } from 'vue-router'; +import { router } from '@/router'; +import { BasicLayout } from '@/layouts/index'; +import { constantRoutes } from '../routes'; + +export async function setDynamicRoutes() { + const vueRoutes: RouteRecordRaw[] = [ + { + path: '/', + name: 'root', + redirect: '/test/test1', + component: BasicLayout, + children: [ + { + path: '/test/test1', + name: 'test1', + component: () => import(`@/views/test/test1.vue`), + meta: { + title: '测试1', + icon: 'icon-park-outline:game-three', + requiresAuth: true, + }, + }, + { + path: '/test/test2', + name: 'test2', + component: () => import('@/views/test/test2.vue'), + meta: { + title: '测试2', + icon: 'carbon:aperture', + requiresAuth: true, + }, + }, + { + path: '/test/test3', + name: 'test3', + component: () => import('@/views/test/test3.vue'), + meta: { + title: '测试3', + icon: 'icon-park-outline:music-list', + requiresAuth: true, + }, + }, + ...constantRoutes, + ], + }, + ]; + vueRoutes.forEach((route) => { + router.addRoute(route); + }); +} diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts index cce6fd4..5db1ee9 100644 --- a/src/router/guard/permission.ts +++ b/src/router/guard/permission.ts @@ -1,6 +1,7 @@ import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'; import { getToken } from '@/utils/auth'; -import { useRouteStore, useAuthStore } from '@/store'; +import { useRouteStore } from '@/store'; +import { setDynamicRoutes } from './dynamic'; export async function createPermissionGuard( to: RouteLocationNormalized, @@ -24,8 +25,9 @@ export async function createPermissionGuard( return false; } - // 有登录但是没有路由,初始化路由等 + // 有登录但是没有路由,初始化路由、侧边菜单等 await routeStore.initAuthRoute(); + await setDynamicRoutes(); } // 权限路由已经加载,仍然未找到,重定向到not-found // if (to.name === 'not-found-page') { diff --git a/src/router/index.ts b/src/router/index.ts index 04a1de6..1fb7df3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,49 +1,8 @@ import type { App } from 'vue'; import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import { setupRouterGuard } from './guard'; -import { BasicLayout } from '../layouts/index'; -import { constantRoutes } from './routes'; const routes: RouteRecordRaw[] = [ - { - path: '/', - name: 'root', - redirect: '/test/test1', - component: BasicLayout, - children: [ - { - path: '/test/test1', - name: 'test1', - component: () => import(`@/views/test/test1.vue`), - meta: { - title: '测试1', - icon: 'icon-park-outline:game-three', - requiresAuth: true, - }, - }, - { - path: '/test/test2', - name: 'test2', - component: () => import('@/views/test/test2.vue'), - meta: { - title: '测试2', - icon: 'carbon:aperture', - requiresAuth: true, - }, - }, - { - path: '/test/test3', - name: 'test3', - component: () => import('@/views/test/test3.vue'), - meta: { - title: '测试3', - icon: 'icon-park-outline:music-list', - requiresAuth: true, - }, - }, - ...constantRoutes, - ], - }, { path: '/login', name: 'login', diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts index 914c147..ac79b6b 100644 --- a/src/router/routes/index.ts +++ b/src/router/routes/index.ts @@ -27,10 +27,6 @@ export const constantRoutes = [ }, { path: '/:pathMatch(.*)*', - name: 'not-found-page', - component: () => import('@/views/inherit-page/not-found/index.vue'), - meta: { - title: '找不到页面', - }, + redirect: '/no-found', }, ]; diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts index 94f0fd9..c723084 100644 --- a/src/store/modules/route.ts +++ b/src/store/modules/route.ts @@ -1,26 +1,25 @@ import { defineStore } from 'pinia'; import { renderIcon, getUserInfo } from '@/utils'; import type { MenuOption } from 'naive-ui'; -// import { useAuthStore } from './auth'; - -// const authStore = useAuthStore(); interface RoutesStatus { isInitAuthRoute: boolean; menus: any; + userRoutes: any; } export const useRouteStore = defineStore('route-store', { state: (): RoutesStatus => { return { + userRoutes: getUserInfo().userRoutes, isInitAuthRoute: false, menus: [], }; }, actions: { async setMenus() { - const { userRoutes } = getUserInfo(); - this.menus = this.transformAuthRoutesToMenus(userRoutes); + this.menus = this.transformAuthRoutesToMenus(this.userRoutes); }, + // 将返回的路由表渲染成侧边栏 transformAuthRoutesToMenus(userRoutes: Auth.UserInfoPermissions[]): MenuOption[] { return userRoutes.map((item) => { @@ -40,6 +39,22 @@ export const useRouteStore = defineStore('route-store', { }); }, + /* 将路由树转换成一维数组 */ + FlatAuthRoutes(routes: AppRoute.Route[]) { + let result: AppRoute.Route[] = []; + routes.forEach((item) => { + if (Object.prototype.hasOwnProperty.call(item, 'children')) { + const temp = item.children || []; + delete item.children; + result.push(item); + result = [...result, ...this.FlatAuthRoutes(temp)]; + } else { + result.push(item); + } + }); + return result; + }, + async initAuthRoute() { await this.setMenus(); this.isInitAuthRoute = true; diff --git a/src/types/business.d.ts b/src/types/business.d.ts index 15fbf78..97c5a56 100644 --- a/src/types/business.d.ts +++ b/src/types/business.d.ts @@ -33,5 +33,6 @@ declare namespace Auth { path: string; meta: AppRoute.RouteMeta; children?: UserInfoPermissions[]; + redirect: string; } }