fix(route): ensure that the first level menu can be hidden

CHANGELOG.zh_CN.md

@@ -19,6 +19,7 @@
 - 修复后台权限指令不生效
 - 确保 progress 进度条正确关闭
 - 修复表格勾选列配置失效问题
+- 确保一级菜单可以被隐藏
 
 ## 2.1.0 (2021-03-15)
 

src/router/helper/routeHelper.ts

@@ -79,27 +79,28 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul
 /**
  * Convert multi-level routing to level 2 routing
  */
-export function flatRoutes(routeModules: AppRouteModule[]) {
-  for (let index = 0; index < routeModules.length; index++) {
-    const routeModule = routeModules[index];
+export function flatMultiLevelRoutes(routeModules: AppRouteModule[]) {
+  const modules: AppRouteModule[] = cloneDeep(routeModules);
+  for (let index = 0; index < modules.length; index++) {
+    const routeModule = modules[index];
     if (!isMultipleRoute(routeModule)) {
       continue;
     }
     promoteRouteLevel(routeModule);
   }
+  return modules;
 }
 
 // Routing level upgrade
 function promoteRouteLevel(routeModule: AppRouteModule) {
   // Use vue-router to splice menus
   let router: Router | null = createRouter({
-    routes: [routeModule as any],
+    routes: [(routeModule as unknown) as RouteRecordNormalized],
     history: createWebHashHistory(),
   });
 
   const routes = router.getRoutes();
-  const children = cloneDeep(routeModule.children);
-  addToChildren(routes, children || [], routeModule);
+  addToChildren(routes, routeModule.children || [], routeModule);
   router = null;
 
   routeModule.children = routeModule.children?.filter((item) => !item.children?.length);
@@ -114,12 +115,15 @@ function addToChildren(
   for (let index = 0; index < children.length; index++) {
     const child = children[index];
     const route = routes.find((item) => item.name === child.name);
-    if (route) {
-      routeModule.children = routeModule.children || [];
-      routeModule.children?.push(route as any);
-      if (child.children?.length) {
-        addToChildren(routes, child.children, routeModule);
-      }
+    if (!route) {
+      continue;
+    }
+    routeModule.children = routeModule.children || [];
+    if (!routeModule.children.find((item) => item.name === route.name)) {
+      routeModule.children?.push((route as unknown) as AppRouteModule);
+    }
+    if (child.children?.length) {
+      addToChildren(routes, child.children, routeModule);
     }
   }
 }

src/router/menus/index.ts

@@ -45,6 +45,7 @@ async function getAsyncMenus() {
 export const getMenus = async (): Promise<Menu[]> => {
   const menus = await getAsyncMenus();
   const routes = router.getRoutes();
+
   return !isBackMode() ? filter(menus, basicFilter(routes)) : menus;
 };
 

src/router/routes/index.ts

@@ -5,7 +5,6 @@ import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
 import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
-import { flatRoutes } from '/@/router/helper/routeHelper';
 
 const modules = import.meta.globEager('./modules/**/*.ts');
 
@@ -17,9 +16,6 @@ Object.keys(modules).forEach((key) => {
   routeModuleList.push(...modList);
 });
 
-// Multi-level routing conversion
-flatRoutes(routeModuleList);
-
 export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
 
 export const RootRoute: AppRouteRecordRaw = {

src/store/modules/permission.ts

@@ -15,7 +15,7 @@ import { toRaw } from 'vue';
 import { getMenuListById } from '/@/api/sys/menu';
 import { getPermCodeByUserId } from '/@/api/sys/user';
 
-import { transformObjToRoute, flatRoutes } from '/@/router/helper/routeHelper';
+import { transformObjToRoute, flatMultiLevelRoutes } from '/@/router/helper/routeHelper';
 import { transformRouteToMenu } from '/@/router/helper/menuHelper';
 
 import { useMessage } from '/@/hooks/web/useMessage';
@@ -99,12 +99,16 @@ class Permission extends VuexModule {
 
     // role permissions
     if (permissionMode === PermissionModeEnum.ROLE) {
-      routes = filter(asyncRoutes, (route) => {
+      const routeFilter = (route) => {
         const { meta } = route as AppRouteRecordRaw;
         const { roles } = meta || {};
         if (!roles) return true;
         return roleList.some((role) => roles.includes(role));
-      });
+      };
+      routes = filter(asyncRoutes, routeFilter);
+      routes = routes.filter(routeFilter);
+      // Convert multi-level routing to level 2 routing
+      routes = flatMultiLevelRoutes(routes);
       //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
     } else if (permissionMode === PermissionModeEnum.BACK) {
       createMessage.loading({
@@ -131,7 +135,7 @@ class Permission extends VuexModule {
       const backMenuList = transformRouteToMenu(routeList);
       this.commitBackMenuListState(backMenuList);
 
-      flatRoutes(routeList);
+      routeList = flatMultiLevelRoutes(routeList);
       routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
     }
     routes.push(ERROR_LOG_ROUTE);