当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 9:33:21

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

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

根据权限拦截路由

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();}}
});