antdPro动态路由
因为项目需要依据后端返回条件动态显示路由,通宵研究了一整个晚上搞出来的比较简单的实现方式
原理
antdPro用的是umi的路由,大体的实现方式是这样的:
router.config.js => .umi/router.js => models/menu.js <=> layouts/BasicLayout.js => components/SiderMenu/index.js
PS: 这仅是针对menuData流向做的分析图 (这里是最终的左边栏)
事实上menu.js依据开发者写在router.config.js里的路径算出来要显示的内容,在这里稍微解释一下:
effects: {*getMenuData({ payload }, { put }) {const { routes, authority } = payload;const menuData = filterMenuData(memoizeOneFormatter(routes, authority));const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);yield put({type: 'save',payload: { menuData, breadcrumbNameMap },});},},
上面是menu.js的内容,意图是将取到的routes(路由实体)和authority(权限配置)交给 memoizeOneFormatter 这个函数,变成未经处理的menuData(包含了所有可见和不可见路由的路由数组) 再交给 filterMenuData 这个函数去计算出真正用于显示的menuData,下面是这部分代码
可以看到 filterMenuData 先是筛掉了要隐藏的目录,然后依据父目录的子目录做了递归,再整理成目录结构的数组最后返回成需要的menuData,这就是最后用于显示的menuData,所以说,我们可以进行干预的部分就是替换掉 memoizeOneFormatter 这个函数的效果,直接把我们算好的初步menuData交给 filterMenuData 之后这个函数就会自己生成我们需要的用于显示的目录
PS:之所以在这一步替换是因为umi路由实际上除了计算实体路由之外,还分开记录了目录对应的key值来实现动画效果,如果有兴趣可以去研究一下源码,如果直接替换menuData本身,会因为缺少必要的数据而无法正确存储对应的key值,直接体现就是四处报错。。。我也是思考了很久才决定在这里处理数据
实现
我在这里写一个demo
我的办法是自己写了一个数组 ss 扔进 filterMenuData 然后页面就显示了这个模拟出的正确路由,当然至于这个ss只是个demo,开发正常应该是后端扔给前端权限name,前端在验证登录的时候同样去递归这个数据得到类似于我写的ss这样的结构,这样就完成了动态路由的显示
本文也参考了以下的文章
https://www.yuque.com/liuyin-zzwa0/ada6ao/va6p77
转载请标明出处哦~
antdPro动态路由相关推荐
- Vue 增加动态路由功能 【在原有系统上增加】
目录 遇到问题 1. 修改router/index.js 2. 修改 store文件夹下的 2.1 增加 modules/permission.js 2.2 增加modules/tagsViews.j ...
- 网络管理员比赛回顾02-网关、静态路由、动态路由
目录 一.配置网关 二.配置静态路由 三.配置动态路由 3.1.使用RIP协议配置动态路由 3.2.使用OSPF协议配置动态路由 2021年9月参加青年网络管理员比赛,因为网管超龄不能按照" ...
- 3、vue-router之什么是动态路由
前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起. GitHub:https://github.com/Ewall1106/mall/tree/master 1.动 ...
- 快速搭建一个网关服务,动态路由、鉴权看完就会(含流程图)
[文章来源]https://sourl.cn/tcbSPi 前 言 本文记录一下我是如何使用Gateway搭建网关服务及实现动态路由的,帮助大家学习如何快速搭建一个网关服务,了解路由相关配置,鉴权的流 ...
- 第三十课.向量胶囊与动态路由
向量胶囊的前向计算 神经元用于检测一种确定的特征,而胶囊在检测特征的同时更注重描述这个特征.向量胶囊使用单位向量表达某种具体的特征,向量的模长反映该特征存在的概率.神经元与胶囊元的示意如图所示,(a) ...
- 华为路由器ospf路由表解读_华为动态路由OSPF实例详解之多区域配置-华为路由器设置...
在企业的大型网络中,因为设备众多,静态路由已经很难满足路由时常变化的需求,动态路由已经是必然选择,其中,OSPF又是最简单适合的动态路由协议,上一节已经介绍了单区域的OSPF配置,接着简单介绍下多区域 ...
- 实战:将静态路由发布到动态路由
将静态路由发布到动态路由 打开随书光盘中第6章练习"06 将静态路由发布到动态路由.pkt",如图6-22所示,河北师大和软件学院有各自独立的网络,有独立的IT部门管理自己的网络. ...
- 《IP路由协议疑难解析》一1.3 动态路由
本节书摘来自异步社区<IP路由协议疑难解析>一书中的第1章,第1.3节,作者 [美]Zaheer Aziz, CCIE #4127 , Johnson Liu, CCIE #2637 , ...
- 路由ssr服务器信息不完整,基于Nuxt构建动态路由SSR服务
大约两年前曾经分享过基于Vue的SSR框架Nuxt的简单使用<基于Vue.js的SSR方案之Nuxt.js>,今天因为有SSR需求又重新做了一些尝试. 由于目前在做的是一个能够动态构建页面 ...
最新文章
- jieba分词流程及部分源码解读(一)
- 数据结构与算法:07 Leetcode同步练习(二)
- 巨大的需求之下 人工智能如何更快落地?
- 微信小程序开发遇到的那些“坑”(1.2.0-1.4.0)
- 如何利用手持终端信息化仓储管理呢
- mysql8碰到 ERROR 1064 (42000)
- [C++] 匿名管道的理解与实现
- vc 控制台添加托盘显示_开源:ESP8266读DHT11温湿度,小程序实时显示
- Centos7 安装OpenTSDB
- windows phone 学习(4)
- python好用的内置库_第42p,time库,Python中优秀的内置库
- mysql 编码php,php-MySQL的编码问题(和基础知识)
- es创建索引库报错 :Types cannot be provided in put mapping requests, unless the include_type_na
- 临牌过期保险能理赔吗?
- Node如何自动重启进程
- Mysql解决死锁的问题,防止阻塞
- 蓝牙:深入浅出低功耗蓝牙(BLE)协议栈
- sql server 用户创建与权限管理
- 聚合直播源码原生播放器php分享,原生聚合直播搭建源码
- 2022年认证杯SPSSPRO杯数学建模C题(第一阶段)污水流行病学原理在新冠疫情防控方面的作用求解全过程文档及程序