后台返回路由的数组,然后根事先写好的路由比对如果相等就放到一个数组中https://www.cnblogs.com/zhengrunlin/p/8981017.html
https://www.cnblogs.com/zhengrunlin/p/8981017.html
首先,await fetchPermission()获取后台给的权限数组,格式大概如下
{
"code": 0,
"message": "获取权限成功",
"data": [
{
"name": "订单管理",
"children": [
{
"name": "订单列表"
},
{
"name": "生产管理",
"children": [
{
"name": "生产列表"
}
]
},
{
"name": "退货管理"
}
]
}
]
}
其次根据我们写好的路由数组,进行对比,过滤得到我们要的路由
/* 这里是我们写好的需要权限判断的路由 */
const dynamicRoutes = [
{
path: '/order',
component: Order,
name: 'order-manage',
meta: {
name: '订单管理'
},
children: [
{
path: 'list',
name: 'order-list',
component: OrderList,
meta: {
name: '订单列表'
}
},
{
path: 'product',
name: 'product-manage',
component: ProductManage,
meta: {
name: '生产管理'
},
children: [
{
path: 'list',
name: 'product-list',
component: ProductionList,
meta: {
name: '生产列表'
}
},
{
path: 'review',
name: 'review-manage',
component: ReviewManage,
meta: {
name: '审核管理'
}
}
]
},
{
path: 'returnGoods',
name: 'return-goods',
component: ReturnGoods,
meta: {
name: '退货管理'
}
}
]
}
] export default dynamicRoutes
为了对比,我写好了一个递归函数,用name和meta.name进行对比 ,根据这个函数就可以得到我们想要的结果 /**
*
* @param {Array} userRouter 后台返回的用户权限json
* @param {Array} allRouter 前端配置好的所有动态路由的集合
* @return {Array} realRoutes 过滤后的路由
*/ export function recursionRouter(userRouter = [], allRouter = []) {
var realRoutes = []
allRouter.forEach((v, i) => {
userRouter.forEach((item, index) => {
if (item.name === v.meta.name) {
if (item.children && item.children.length > 0) {
v.children = recursionRouter(item.children, v.children)
}
realRoutes.push(v)
}
})
})
return realRoutes
}
得到过滤后的数组后,加入到path为''的children下面 {
path: '',
component: Layout,
name: 'container',
redirect: 'home',
meta: {
requiresAuth: true,
name: '首页'
},
children: [
{
path: 'home',
component: Home,
name: 'home',
meta: {
name: '首页'
}
},
<!-- 将上面得到的东西加入到这里 -->
...
]
}
后台返回路由的数组,然后根事先写好的路由比对如果相等就放到一个数组中https://www.cnblogs.com/zhengrunlin/p/8981017.html的更多相关文章
- 4.产生10个1-100的随机数,并放到一个数组中 (1)把数组中大于等于10的数字放到一个list集合中,并打印到控制台。 (2)把数组中的数字放到当前文件夹的numArr.txt文件中
package cn.it.text; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLis ...
- jquery将具有相同名称的元素的值提取出来放到一个数组内
jquery将具有相同名称的元素的值提取出来放到一个数组内 var arrInputValues = new Array(); $("input[name='xxx']").ea ...
- 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法
获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...
- OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法
<span style="font-size:24px;">//////第一种方法 // NSMutableArray *arr = [NSMutableArray a ...
- JS怎么把for循环出来的东西放到一个数组里
var students=[ {name: "vehicleTravelLicenseCopyBack", id: "a1"}, {name: "ve ...
- 一、虚拟环境.二、路由配置主页与404.三、2.x路由分发.四、伪静态.五、request对象.六、FBV与CBV.七、文件上传.
一.虚拟环境 ''' 解决版本共存 1. 用pycharm选择File点击NewProject然后选择virtualenv创建一个纯净环境 2. 打开下载的目录将venv文件夹下的所有文件(纯净的环境 ...
- 求一个数组的最大子数组(C/C++实现)
最大子数组:要求相连,加起来的和最大的子数组就是一个数组的最大子数组.编译环境:VS2012,顺便说句其实我是C#程序员,我只是喜欢学C++. 其实这是个半成品,还有些BUG在里面,不过总体的思路是这 ...
- JS如何去掉一个数组的重复元素 (数组去重)
一.思路如下: 定义一个新数组,将老数组遍历一遍,再进行判断,如果新数组里面没有老数组的元素就添加,否则就不添加,最终输出整个新数组. 二.代码如下: var arr = ["a" ...
- 用递归的方法求一个数组的前n项和
用递归的方法求一个数组的前n项和 public class Demo1 { /* * 用递归的方法求一个数组的前n项和 */ public static void main(String[] args ...
随机推荐
- 转载->CPU的内部架构和工作原理
CPU的内部架构和工作原理 本片博客转自:http://www.cnblogs.com/onepixel/p/8724526.html 感谢博主分享! 内部架构 CPU 的根本任务就是执行指令,对计 ...
- mac环境变量
环境: 当前已经有 .bash_profile文件了 打开.bash_profile: open -e .bash_proile open -e .bash_profile 查看node安装路径: w ...
- Unity Shader 景深效果
效果 原理: 开启摄像机的深度模式,将深度保存到一张名为_CameraDepthTexture(Unity5.0之后才有)内置的纹理中. 如果深度在焦点范围内就用原图,否则就用模糊图. Shader: ...
- python3 日志检索异常抛出异常 raise KeyError(key),KeyError: 'formatters'
原因分析,python3启动时,检索的不是项目包下的目录文件,所以日志文件必须指明路径.我原来的日志方式是: import logging.config log_path = "mlpcap ...
- collections模块和os模块
collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...
- Nodejs----基本数据类型
Nodejs基本数据类型: nodejs的基础JavaScript(脚本语言). 而大多数的
- Maven、SpringBoot框架结构优化
一.创建maven项目,名为test-parent,pom文件如下: ... <artifactId>test-parent</artifactId> <version& ...
- InputStream只能读取一次的解决办法 C# byte[] 和Stream转换
x 情景--->>> 导入文件的时候,前台传过来一个文件, 后台接到: HttpPostedFileBase file = Request.Files[];由于对这个文件后台处理比较 ...
- [No0000182]Parallel Programming with .NET-Partitioning in PLINQ
Every PLINQ query that can be parallelized starts with the same step: partitioning. Some queries ma ...
- [No000011E]Python教程1/9-Python简介
Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaScript语言等等. 那P ...