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的更多相关文章

  1. 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 ...

  2. jquery将具有相同名称的元素的值提取出来放到一个数组内

    jquery将具有相同名称的元素的值提取出来放到一个数组内 var arrInputValues = new Array();  $("input[name='xxx']").ea ...

  3. 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法

    获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...

  4. OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法

    <span style="font-size:24px;">//////第一种方法 // NSMutableArray *arr = [NSMutableArray a ...

  5. JS怎么把for循环出来的东西放到一个数组里

    var students=[ {name: "vehicleTravelLicenseCopyBack", id: "a1"}, {name: "ve ...

  6. 一、虚拟环境.二、路由配置主页与404.三、2.x路由分发.四、伪静态.五、request对象.六、FBV与CBV.七、文件上传.

    一.虚拟环境 ''' 解决版本共存 1. 用pycharm选择File点击NewProject然后选择virtualenv创建一个纯净环境 2. 打开下载的目录将venv文件夹下的所有文件(纯净的环境 ...

  7. 求一个数组的最大子数组(C/C++实现)

    最大子数组:要求相连,加起来的和最大的子数组就是一个数组的最大子数组.编译环境:VS2012,顺便说句其实我是C#程序员,我只是喜欢学C++. 其实这是个半成品,还有些BUG在里面,不过总体的思路是这 ...

  8. JS如何去掉一个数组的重复元素 (数组去重)

    一.思路如下: 定义一个新数组,将老数组遍历一遍,再进行判断,如果新数组里面没有老数组的元素就添加,否则就不添加,最终输出整个新数组. 二.代码如下: var arr = ["a" ...

  9. 用递归的方法求一个数组的前n项和

    用递归的方法求一个数组的前n项和 public class Demo1 { /* * 用递归的方法求一个数组的前n项和 */ public static void main(String[] args ...

随机推荐

  1. iOS - 身份证判断正则加算法

    身份证常识 我国的身份证号分为15位和18位两种.身份证是国民的身份编号,编号是有一定规律的. 居民身份证号码,根据[中华人民共和国国家标准 GB -]中有关公民身份号码的规定,公民身份号码是特征组合 ...

  2. 专访姚冬:All-in-One,智能时代下企业需要更快速的变革

    2017年,msup将咨询服务列入公司发展战略目标,并邀请前IBM大中华区技术总监姚冬成为咨询合伙人.近一年来,msup在咨询服务方面持续发力,与包括百度.平安科技.用友等在内的大型公司形成企业合作联 ...

  3. .NET Core开发日志——Startup

    一个典型的ASP.NET Core应用程序会包含Program与Startup两个文件.Program类中有应用程序的入口方法Main,其中的处理逻辑通常是创建一个WebHostBuilder,再生成 ...

  4. [No0000180]改善C#程序的建议8:避免锁定不恰当的同步对象

    在C#中让线程同步的另一种编码方式就是使用线程锁.所谓线程锁,就是锁住一个资源,使得应用程序只能在此刻有一个线程访问该资源.可以用下面这句不是那么贴切的话来理解线程锁的作用:锁,就是让多线程变成单线程 ...

  5. [No0000B1]ReSharper操作指南2/16-ReSharper食谱与特定于域的教程

    自动导入名称空间 有关更多信息,请参阅导入缺少命名空间. 每当您使用未添加using语句的命名空间中的类型时,ReSharper会为您提供在您所在文件的顶部添加相应的语句.这由在所使用的类型上方显示的 ...

  6. [No0000C9]神秘的掐指一算是什么?教教你也会

    很多朋友看到传说中诸葛亮以及那些聪明人掐指一算,惊叹不已.那些人以“察天地之理.通鬼神之志”,每次占卜时,做一大堆的神秘仪式,然后掐指一算,便大有“乾坤尽收在手”的感觉.在普通人眼里,他们的手神秘异常 ...

  7. shell之awk面试小案例

    [root@chavinking mnt]# cat textfile chavinking 1 2 3 4 5 6 nope 1 2 3 4 5 6 [root@chavinking mnt]# c ...

  8. DHCP协议和PXE

    在学习IP地址基本概念之后,需要了解到如果需要和其他机器通讯,我们就需要一个通讯地址,我们需要给网卡配置一个地址. 如何配置 IP 地址? 可以用命令行自己配置一个地址.可以使用 ifconfig,也 ...

  9. 解决GP服务产生的结果无法自动发布为地图服务的问题

    在ArcGIS for Javascript API或REST API调用GP服务时,常常会遇到这样一种情况:GP服务运行以后,执行成功,也能够生成结果,然而结果并没有直接产生动态的地图服务供API调 ...

  10. [others]tinycore/microcore

    https://zh.wikipedia.org/wiki/Tiny_Core_Linux https://github.com/zeit/micro