fix(菜单): 隐藏不显示的模块菜单

【【系统设置】项目-开启模块-关闭所有模块-查看该项目-依旧显示所有模块】
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001049439

frontend/src/components/business/ms-menu/use-menu-tree.ts

@@ -4,12 +4,15 @@ import { cloneDeep } from 'lodash-es';
 
 import usePermission from '@/hooks/usePermission';
 import appClientMenus from '@/router/app-menus';
+import { featureRouteMap } from '@/router/constants';
+import useAppStore from '@/store/modules/app';
 
 /**
  * 获取菜单树
  * @returns
  */
 export default function useMenuTree() {
+  const appStore = useAppStore();
   const permission = usePermission();
   const menuTree = computed(() => {
     const copyRouter = cloneDeep(appClientMenus) as RouteRecordNormalized[];
@@ -24,6 +27,14 @@ export default function useMenuTree() {
           return null;
         }
 
+        // 如果是隐藏的模块，则不显示菜单
+        if (
+          featureRouteMap[element.name as string] &&
+          !appStore.currentMenuConfig.includes(featureRouteMap[element.name as string])
+        ) {
+          return null;
+        }
+
         // 权限校验不通过
         if (!permission.accessRouter(element)) {
           return null;

frontend/src/router/constants.ts

@@ -1,3 +1,10 @@
+import {
+  ApiTestRouteEnum,
+  BugManagementRouteEnum,
+  CaseManagementRouteEnum,
+  TestPlanRouteEnum,
+} from '@/enums/routeEnum';
+
 // 路由白名单，无需校验权限与登录状态
 export const WHITE_LIST = [
   { name: 'notFound', path: '/notFound', children: [] },
@@ -77,3 +84,11 @@ export const WHITE_LIST_NAME = WHITE_LIST.map((el) => el.name);
 
 // 全屏无资源页面用于分享全屏的页面
 export const NOT_FOUND_RESOURCE = 'notResourceScreen';
+
+// 功能路由映射
+export const featureRouteMap: Record<string, any> = {
+  [ApiTestRouteEnum.API_TEST]: 'apiTest',
+  [CaseManagementRouteEnum.CASE_MANAGEMENT]: 'caseManagement',
+  [TestPlanRouteEnum.TEST_PLAN]: 'testPlan',
+  [BugManagementRouteEnum.BUG_MANAGEMENT]: 'bugManagement',
+};

frontend/src/router/guard/permission.ts

@@ -1,14 +1,22 @@
 import usePermission from '@/hooks/usePermission';
+import useAppStore from '@/store/modules/app';
 
-import { NO_RESOURCE_ROUTE_NAME, WHITE_LIST } from '../constants';
+import { featureRouteMap, NO_RESOURCE_ROUTE_NAME, WHITE_LIST } from '../constants';
 import NProgress from 'nprogress'; // progress bar
 import type { Router } from 'vue-router';
 
 export default function setupPermissionGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
+    const appStore = useAppStore();
     const Permission = usePermission();
     const permissionsAllow = Permission.accessRouter(to);
-
+    // 如果是隐藏的模块，则跳转到无权限页面
+    const moduleId = Object.keys(featureRouteMap).find((key) => (to.name as string)?.includes(key));
+    if (moduleId && featureRouteMap[moduleId] && !appStore.currentMenuConfig.includes(featureRouteMap[moduleId])) {
+      next({
+        name: NO_RESOURCE_ROUTE_NAME,
+      });
+    }
     const exist = WHITE_LIST.find((el) => el.name === to.name);
     if (exist || permissionsAllow) {
       next();