fix: 隐藏部分路由 & 分权限显示

src/layouts/GlobalLayout.vue

@@ -40,6 +40,8 @@
       </a-breadcrumb>
     </template>
     <TabLayout />
+
+    <!-- 使用更简单的方式处理菜单渲染 -->
   </pro-layout>
 </template>
 
@@ -73,7 +75,11 @@ export default {
     ...mapGetters(["permissions"]),
     menus() {
       const root = routes.find((v) => v.path === "/");
-      return filterRoutes(root?.children || [], this.permissions);
+      // 过滤掉hidden为true的路由
+      const filteredRoutes = this.filterHiddenRoutes(
+        filterRoutes(root?.children || [], this.permissions)
+      );
+      return filteredRoutes;
     },
     rightContentClass() {
       return [
@@ -98,6 +104,25 @@ export default {
         this.collapsed = false;
       }
     },
+
+    // 过滤隐藏路由
+    filterHiddenRoutes(routes) {
+      if (!routes) return [];
+
+      return routes
+        .filter((route) => !(route.meta && route.meta.hidden === true))
+        .map((route) => {
+          // 创建新对象，避免修改原始路由
+          const newRoute = { ...route };
+
+          // 如果有子路由，递归过滤
+          if (newRoute.children && newRoute.children.length > 0) {
+            newRoute.children = this.filterHiddenRoutes(newRoute.children);
+          }
+
+          return newRoute;
+        });
+    },
   },
 };
 </script>
@@ -204,13 +229,13 @@ export default {
   margin: 24px;
   padding: 24px;
   background: #fff;
-  min-height: calc(100vh - 128px);  // 移除固定height
+  min-height: calc(100vh - 128px); // 移除固定height
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  display: flex;           // 添加flex布局
-  flex-direction: column;  // 垂直方向排列
-  flex: 1;                // 占用剩余空间
-  overflow: auto;         // 内容过多时显示滚动条
+  display: flex; // 添加flex布局
+  flex-direction: column; // 垂直方向排列
+  flex: 1; // 占用剩余空间
+  overflow: auto; // 内容过多时显示滚动条
 }
 
 // 添加布局容器样式

src/router/index.js

@@ -1,4 +1,3 @@
-
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import GlobalLayout from '@/layouts/GlobalLayout';
@@ -32,7 +31,7 @@ export const routes = [
             path: '/console/list',
             name: 'ConsoleLog',
             component: () => import('@/views/user/Console.vue'),
-            meta: { title: '大数据', auth: 0 },
+            meta: { title: '大数据', auth: [0]  },
           },
         ],
       },
@@ -107,7 +106,11 @@ export const routes = [
             path: '/community/edit',
             name: 'EditArticle',
             component: () => import('@/components/edit/tinymce'),
-            meta: { title: '文章编辑', auth: [0,1,2], hidden: true },
+            meta: { 
+              title: '文章编辑', 
+              auth: [0,1,2], 
+              hidden: true // 确保此项存在且为true
+            },
           },
           {
             path: '/community/pages',
@@ -186,11 +189,16 @@ const filteredRoutes = filterRoutes(routes, userPrivileges);
 const router = new VueRouter({
   mode: 'hash',
   base: process.env.BASE_URL,
-  routes: routes,
+  routes: routes, // 使用原始路由，不过滤
 });
 
+// 修改后的过滤函数
 export function filterRoutes(routes, userPrivileges) {
+  // 递归处理单个路由
   function filterSingleRoute(route, userPrivileges) {
+    if (!route) return null; // 空值检查
+    
+    // 1. 权限检查
     if (route.meta && route.meta.auth) {
       if (Array.isArray(route.meta.auth)) {
         if (!route.meta.auth.some(authLevel => userPrivileges == authLevel)) {
@@ -202,17 +210,37 @@ export function filterRoutes(routes, userPrivileges) {
         }
       }
     }
-
-    if (route.children && route.children.length >= 0) {
-      route.children = route.children
-        .map(childRoute => filterSingleRoute(childRoute, userPrivileges))
-        .filter(childRoute => childRoute !== null && childRoute?.meta?.hidden != true);
+    
+    // 2. 隐藏检查 - 如果meta.hidden为true，则从菜单中隐藏，但不从路由中移除
+    let shouldHideInMenu = route.meta && route.meta.hidden === true;
+    
+    // 创建路由副本，避免修改原始对象
+    let routeCopy = { ...route };
+    
+    // 如果需要在菜单中隐藏，添加hideInMenu标记
+    if (shouldHideInMenu) {
+      if (!routeCopy.meta) routeCopy.meta = {};
+      routeCopy.meta.hideInMenu = true;
     }
-
-    return route;
+    
+    // 递归处理子路由
+    if (routeCopy.children && routeCopy.children.length > 0) {
+      routeCopy.children = routeCopy.children
+        .map(childRoute => filterSingleRoute(childRoute, userPrivileges))
+        .filter(childRoute => childRoute !== null && childRoute !== undefined);
+    }
+    
+    return routeCopy;
   }
 
-  return routes.map(route => filterSingleRoute(route, userPrivileges)).filter(route => route !== null);
+  // 过滤整个路由树
+  return routes
+    .map(route => filterSingleRoute(route, userPrivileges))
+    .filter(route => {
+      return route !== null && 
+             route !== undefined && 
+             (route?.children?.length > 0 || route?.meta?.alwaysShow);
+    });
 }
 
-export default router;
+export default router;

src/views/Login.vue

@@ -44,8 +44,10 @@
 <style scoped lang="stylus">
 .container
   height 100vh
-
   background-image url('https://www.sxhju.cn/images/weixintupian_20240717112809.jpg')
+  background-size cover
+  background-position center
+  background-repeat no-repeat
   position relative
   display flex
   justify-content center