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

本文主要是介绍前端根据权限生成三级路由，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

//后端返回的数组
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 = routesListthis.authArrFilter = authArrthis.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)

这篇关于前端根据权限生成三级路由的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---