vue动态路由 导航栏列表展示 权限管理

效果图

先来看看后台返回数据格式

1.处理后台返回数据

getPermission(){//获取权限的方法
  getPermissoonList(state).then(res => {//getPermissoonList:接口  获取权限数组
    if(res.code === 200){
      let permissionList = mapPermission(res.data)//获取到perimission数组
      let accessedRouters = filterAsyncRouter(asyncRoutes, permissionList)//asyncRoutes为router>index.js路由
      router.addRoutes(accessedRouters)
    }
  })
}

2.整理权限 只保留权限名称放入数组

function mapPermission(permission) {
  let arr = []
  permission.forEach(i => {
    arr.push(i.permission)
    let _arr = []
    if (i.childList && i.childList.length) {//向下递归调用 查询到最内层数据 把所有permission字段拿到
      _arr = mapPermission(i.childList)
    }
    arr.push(..._arr)
  })
  return arr
}

console.log(permissionList)

3.根据router>index.js过滤接口获得的权限

function filterAsyncRouter(asyncRouterMap, permissionList) {
  let arr = asyncRouterMap.filter(router => {
    if (checkRouter(router,permissionList)) {
      if (router.children && router.children.length) {
        router.children = filterAsyncRouter(router.children,permissionList)//向下递归调用直到最内层
      }
      return true
    } else {
      return false
    }
  })
  return arr
}

4.后台获取的权限数组与router>index.js里的路由进行对比看是否存在

function checkRouter(router,permissionList) {
  if (permissionList.indexOf(router.name) != -1) { //后台获取的权限数组与router>index.js里的路由进行对比
    return true
  } else {
    return false
  }
}

用router.addRoutes把根据router内的路由过滤出的权限路由动态添加进去