feat: 路由增加perms配置项

apps/web-antd/src/router/guard.ts

@@ -102,6 +102,7 @@ function setupAccessGuard(router: Router) {
 
     // 生成菜单和路由
     const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      accessCodes: accessStore.accessCodes || [],
       roles: userRoles,
       router,
       // 则会在菜单中显示，但是访问会被重定向到403

apps/web-ele/src/router/guard.ts

@@ -102,6 +102,7 @@ function setupAccessGuard(router: Router) {
 
     // 生成菜单和路由
     const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      accessCodes: accessStore.accessCodes || [],
       roles: userRoles,
       router,
       // 则会在菜单中显示，但是访问会被重定向到403

apps/web-naive/src/router/guard.ts

@@ -101,6 +101,7 @@ function setupAccessGuard(router: Router) {
 
     // 生成菜单和路由
     const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      accessCodes: accessStore.accessCodes || [],
       roles: userRoles,
       router,
       // 则会在菜单中显示，但是访问会被重定向到403

packages/@core/base/typings/src/vue-router.d.ts

@@ -102,6 +102,10 @@ interface RouteMeta {
    * 用于路由->菜单排序
    */
   order?: number;
+  /**
+   * 需要特定的权限码标识才可以访问
+   */
+  perms?: string[];
   /**
    * 菜单所携带的参数
    */
@@ -121,6 +125,7 @@ type RouteRecordStringComponent<T = string> = {
 type ComponentRecordType = Record<string, () => Promise<Component>>;
 
 interface GenerateMenuAndRoutesOptions {
+  accessCodes?: string[];
   fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
   forbiddenComponent?: RouteRecordRaw['component'];
   layoutMap?: ComponentRecordType;

packages/effects/access/src/accessible.ts

@@ -42,7 +42,7 @@ async function generateRoutes(
   mode: AccessModeType,
   options: GenerateMenuAndRoutesOptions,
 ) {
-  const { forbiddenComponent, roles, routes } = options;
+  const { forbiddenComponent, roles, routes, accessCodes } = options;
 
   let resultRoutes: RouteRecordRaw[] = routes;
   switch (mode) {
@@ -54,6 +54,7 @@ async function generateRoutes(
       resultRoutes = await generateRoutesByFrontend(
         routes,
         roles || [],
+        accessCodes || [],
         forbiddenComponent,
       );
       break;

packages/utils/src/helpers/generate-routes-frontend.ts

@@ -8,10 +8,14 @@ import { filterTree, mapTree } from '@vben-core/shared/utils';
 async function generateRoutesByFrontend(
   routes: RouteRecordRaw[],
   roles: string[],
+  accessCodes: string[],
   forbiddenComponent?: RouteRecordRaw['component'],
 ): Promise<RouteRecordRaw[]> {
   // 根据角色标识过滤路由表,判断当前用户是否拥有指定权限
   const finalRoutes = filterTree(routes, (route) => {
+    if (!route.meta?.authority) {
+      return hasPerms(route, accessCodes);
+    }
     return hasAuthority(route, roles);
   });
 
@@ -42,7 +46,20 @@ function hasAuthority(route: RouteRecordRaw, access: string[]) {
 
   return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
 }
+/**
+ * 判断路由是否有权限访问
+ * @param route
+ * @param access
+ */
+function hasPerms(route: RouteRecordRaw, access: string[]) {
+  const perms = route.meta?.perms;
+  if (!perms) {
+    return true;
+  }
+  const canAccess = access.some((value) => perms.includes(value));
 
+  return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
+}
 /**
  * 判断路由是否在菜单中显示，但是访问会被重定向到403
  * @param route