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

This commit is contained in:
Shu Guang 2025-05-17 23:06:22 +08:00
parent f31f88c324
commit a589d7ed37
2 changed files with 72 additions and 19 deletions

View File

@ -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);
// hiddentrue
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; //
}
//

View File

@ -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)) {
@ -203,16 +211,36 @@ 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;