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

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

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

//后端返回的数组
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)
http://www.lryc.cn/news/371980.html

相关文章:

  • Databricks超10亿美元收购Tabular;Zilliz 推出 Milvus Lite ; 腾讯云支持Redis 7.0
  • 算法day29
  • 车牌识别(附源代码)
  • 在VSCode中安装python
  • StarkNet架构之L1-L2消息传递机制
  • 19.2 HTTP客户端-定制HTTP请求、调试HTTP、响应超时
  • KafkaQ - 好用的 Kafka Linux 命令行可视化工具
  • 不愧是字节,图像算法面试真细致
  • 14、C++中代码重用
  • 剖析框架代码结构的系统方法(下)
  • C语言学习笔记之结构体(一)
  • MATLAB入门知识
  • 计算机网络(5) ARP协议
  • 美团的 AI 面试有点简单
  • 编程软件怎么给机器人编程:深入探索编程与机器人技术的融合
  • unity2d Ugui--Image城市道路汽车行驶
  • 【深度学习】【Prompt】使用GPT的一些提示词
  • 如何在centos中和windows server中找到挖矿木马和消灭挖矿木马
  • Slice用法举例Python
  • 响应式网页开发方法与实践
  • feedparser - Python 解析Atom和RSSfeed
  • ARM32开发--IIC时钟案例
  • [深度学习]基于C++和onnxruntime部署yolov10的onnx模型
  • Spring-事件
  • delmia的工序设置
  • 【JavaEE精炼宝库】多线程(5)单例模式 | 指令重排序 | 阻塞队列
  • [图解]《分析模式》漫谈03-Party是什么
  • 【Numpy】一文向您详细介绍 np.abs()
  • 【AI绘画】Stable Diffusion 3开源
  • 使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式