前端根据权限生成三级路由并且根据父子路径拼接key

KAGHQ

已于 2024-06-21 16:52:33 修改

阅读量114

点赞数 2

文章标签：前端

于 2024-06-21 16:33:58 首次发布

本文链接：https://blog.csdn.net/lrqqhm/article/details/139864641

版权

//后端返回的数组
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'],
},
},
],
},
]
},
];
const arr3 = [
{
key: "/sale-manage",
path: "/sale-manage",
redirect: "/sale-manage/sale-order/sale-list",
name: 'saleManage',
component: 'Layout',
meta: {
title_zh: '销售管理',
icon: 'i_dingdanguanli',
auth: ['sale.management'],
},
children: [
{
key: "/sale-manage/sale-order",
path: "sale-order",
redirect: "/sale-manage/sale-order/sale-list",
name: "saleOrder",
meta: {
title_zh: '销售订单',
auth: ['sale.order'],
},
children: [
{
key: "/sale-manage/sale-list",
path: "sale-list",
name: "saleList",
component: () => import("../views/saleList/sale-list.vue"),
meta: {
title_zh: '销售订单',
auth: ['sale.list'],
},
},
{
key: "/sale-manage/sale-detail",
path: "sale-detail",
name: "saleDetail",
component: () => import("../views/saleList/sale-detail.vue"),
hidden: true,
meta: {
title_zh: '销售订单详情',
auth: ['sale.detail'],
},
}
],
},
]
},
] 根据arr1和arr2生成arr3

// reduce的第一个参数是迭代计算后的参数
function generateRoutes(items, authArr, parentKey = '') {
  return items.reduce((result, item) => {
    if (!item.hidden && item.meta && item.meta.auth && item.meta.auth.length > 0) {
      const auth = item.meta.auth[0];
      if (authArr.includes(auth)) {
        const clonedItem = { ...item };
        const path = item.path.startsWith('/') ? item.path.slice(1) : item.path;
        const key = parentKey ? `${parentKey}/${path}` : path;
        clonedItem.key = `/${key}`;
        if (item.children && item.children.length > 0) {
          clonedItem.children = generateRoutes(item.children, authArr, key);
        }
        result.push(clonedItem);
      }
    }
    return result;
  }, []);
}

const arr3 = generateRoutes(arr2, arr1);