diff --git a/src/config/route.ts b/src/config/route.ts index 3f3b6b24..d523dda3 100644 --- a/src/config/route.ts +++ b/src/config/route.ts @@ -1,9 +1,9 @@ -/** 动态路由配置 */ +/** 路由配置 */ interface RouteSettings { /** * 是否开启动态路由功能? * 1. 开启后需要后端配合,在查询用户详情接口返回当前用户可以用来判断并加载动态路由的字段(该项目用的是角色 roles 字段) - * 2. 假如项目不需要根据不同的用户来显示不同的页面,则应该将 async: false + * 2. 假如项目不需要根据不同的用户来显示不同的页面,则应该将 dynamic: false */ dynamic: boolean /** 当动态路由功能关闭时: diff --git a/src/router/index.ts b/src/router/index.ts index ea4fe2e6..aa66c3fc 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -255,7 +255,7 @@ export const constantRoutes: RouteRecordRaw[] = [ * 用来放置有权限 (Roles 属性) 的路由 * 必须带有 Name 属性 */ -export const asyncRoutes: RouteRecordRaw[] = [ +export const dynamicRoutes: RouteRecordRaw[] = [ { path: "/permission", component: Layouts, diff --git a/src/router/permission.ts b/src/router/permission.ts index 092db5df..0ef6c7c0 100644 --- a/src/router/permission.ts +++ b/src/router/permission.ts @@ -43,7 +43,7 @@ router.beforeEach(async (to, _from, next) => { // 生成可访问的 Routes routeSettings.dynamic ? permissionStore.setRoutes(roles) : permissionStore.setAllRoutes() // 将 "有访问权限的动态路由" 添加到 Router 中 - permissionStore.dynamicRoutes.forEach((route) => router.addRoute(route)) + permissionStore.addRoutes.forEach((route) => router.addRoute(route)) // 确保添加路由已完成 // 设置 replace: true, 因此导航将不会留下历史记录 next({ ...to, replace: true }) diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 4af385a0..2ae6eeac 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -2,7 +2,7 @@ import { ref } from "vue" import store from "@/store" import { defineStore } from "pinia" import { type RouteRecordRaw } from "vue-router" -import { constantRoutes, asyncRoutes } from "@/router" +import { constantRoutes, dynamicRoutes } from "@/router" import { flatMultiLevelRoutes } from "@/router/helper" import routeSettings from "@/config/route" @@ -11,13 +11,13 @@ const hasPermission = (roles: string[], route: RouteRecordRaw) => { return routeRoles ? roles.some((role) => routeRoles.includes(role)) : true } -const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => { +const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => { const res: RouteRecordRaw[] = [] routes.forEach((route) => { const tempRoute = { ...route } if (hasPermission(roles, tempRoute)) { if (tempRoute.children) { - tempRoute.children = filterAsyncRoutes(tempRoute.children, roles) + tempRoute.children = filterDynamicRoutes(tempRoute.children, roles) } res.push(tempRoute) } @@ -26,26 +26,28 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => { } export const usePermissionStore = defineStore("permission", () => { + /** 可访问的路由 */ const routes = ref([]) - const dynamicRoutes = ref([]) + /** 有访问权限的动态路由 */ + const addRoutes = ref([]) - /** 根据角色生成可访问的 Routes(可访问路由 = 常驻路由 + 有访问权限的动态路由) */ + /** 根据角色生成可访问的 Routes(可访问的路由 = 常驻路由 + 有访问权限的动态路由) */ const setRoutes = (roles: string[]) => { - const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) + const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles) _set(accessedRoutes) } /** 所有路由 = 所有常驻路由 + 所有动态路由 */ const setAllRoutes = () => { - _set(asyncRoutes) + _set(dynamicRoutes) } const _set = (accessedRoutes: RouteRecordRaw[]) => { routes.value = constantRoutes.concat(accessedRoutes) - dynamicRoutes.value = routeSettings.thirdLevelRouteCache ? flatMultiLevelRoutes(accessedRoutes) : accessedRoutes + addRoutes.value = routeSettings.thirdLevelRouteCache ? flatMultiLevelRoutes(accessedRoutes) : accessedRoutes } - return { routes, dynamicRoutes, setRoutes, setAllRoutes } + return { routes, addRoutes, setRoutes, setAllRoutes } }) /** 在 setup 外使用 */