前端根据权限生成三级路由

三级菜单和后端返回数组对比获取有权限的路由
数组：

//后端返回的数组
const arr1 = ['sale.management', 'sale.order', 'sale.detail'];
//前端路由
const arr2 = [
{
path: "/sale-manage",
redirect: "/sale-manage/sale-order/sale-list",
name: 'saleManage',
component: 'Layout',
meta: {
title_zh: '销售管理',
icon: 'i_dingdanguanli',
auth: ['sale.management'],
},
children: [
{
path: "sale-order",
redirect: "/sale-manage/sale-order/sale-list",
name: "saleOrder",
meta: {
title_zh: '销售订单',
auth: ['sale.order'],
},
children: [
{
path: "sale-list",
name: "saleList",
component: () => import("../views/saleList/sale-list.vue"),
meta: {
title_zh: '销售订单',
auth: ['sale.list'],
},
},
{
path: "sale-detail",
name: "saleDetail",
component: () => import("../views/saleList/sale-detail.vue"),
hidden: true,
meta: {
title_zh: '销售订单详情',
auth: ['sale.detail'],
},
},
{
path: "purchasing-agent-list",
name: "purchasingAgentList",
component: () => import("../views/saleList/11.vue"),
meta: {
title_zh: '111',
auth: ['11.list'],
},
},
{
path: "purchasing-agent-detail",
name: "purchasingAgentDetail",
component: () => import("../views/saleList/11detail.vue"),
hidden: true,
meta: {
title_zh: '11详情',
auth: ['11.detail'],
},
},
],
},
]
},
];

// 筛选有权限的路由
function filterItems(items, authArr) {
const filteredItems = items.filter((item) => {
if (!item.hidden) {
const auth = item.meta && item.meta.auth && item.meta.auth[0]
return authArr.includes(auth);
}
});
if (filteredItems.length === 0) {
return [];
}
filteredItems.forEach((item) => {
if (item.children && item.children.length > 0) {
item.children = filterItems(item.children, authArr);
}
});
return filteredItems;
}
class authRoutes {
constructor(routesList, authArr) {
this.routesList = routesList
this.authArrFilter = authArr
this.routesAuthArr = []
}
filterRoutesArray(routesList, authArr) {
this.authArrFilter = authArr.map((item) => item.path)
this.routesAuthArr = filterItems(routesList, this.authArrFilter)
}
}
export default authRoutes

使用：

const authRoutesObj = new authRoutes(arr1 , arr2 )
authRoutesObj.filterRoutesArray(routes, res)
console.log(authRoutesObj.routesAuthArr)

根据权限拦截路由

router.beforeEach((to, from, next) => {
window.scrollTo(0, 0); // 跳转页面后 滚动条默认置顶
const token = Core.Data.getToken();
const loginType = Core.Data.getLoginType();
NProgress.start();
if (to.meta.title) {
const lang = Core.Data.getLang();
document.title = 'EOS' + ' | ' + (lang === 'zh' ? to.meta.title : to.meta.title_en);
}
if (inWhiteList(to.path)) {
if (to.path === '/') next('/login');
next();
NProgress.done();
return;
}
if (!token) {
// 没登录
message.info('请先登录');
NProgress.done();
next('/login');
} else {
// 已登录
const roles = to.meta.roles;
if (roles) {
// 如果进入的路由meta中有roles规则
if (roles.includes(loginType)) {
next();
} else {
// 表前userType禁止访问
message.warning('当前身份无法访问');
next('/');
NProgress.done();
}
} else {
// 没有roles规则直接放行
next();
}
}
});