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

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

//后端返回的数组
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();
        }
    }
});