vue中 使用 js 递归异步路由表 根据传入的角色数组userRoles 生成最终该用户权限下 能访问的权限路由

vue中 使用 js 递归异步路由表 根据传入的角色数组userRoles 生成最终该用户权限下 能访问的权限路由

const asyncRoutesArr3 = [  {
    path: '/permission',
    component: Layout, // &&&&你可以选择不同的layout组件,
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav // 页面需要的权限
    },
    children: [ // 这里开始对应的路由都会显示在app-main中----
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'Page Permission',
          roles: ['admin'] // or you can only set roles in sub nav //页面需要的权限
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          title: 'Directive Permission',
          roles: ['admin']
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'Role Permission',
          roles: ['editor']
        }
      }
    ]
  },]

  /**递归过滤异步路由表，返回符合用户角色权限的路由表*/
  function filterAsyncRoutes(routeArray,userRoles) {
     let res = [];
     routeArray.forEach(route => {
         const temp = {...route }
         console.log(temp, "temp")
         if (temp.meta && temp.meta.roles && userRoles.some(val => temp.meta.roles.includes(val)) ) { //判断用户是否有权限访问 当前路由
             if (temp.children) { // 判断当前 遍历路有对象 下是否有children属性 如果有---进行递归调用---再次进行判断--生成该用户有权限下的children----如果没有children那么递归终止进行下去。
                temp.children = filterAsyncRoutes(temp.children, userRoles)
             }
             res.push(temp);
         }
     })
     return res; // 返回用户权限下的路由表数组

  }

 console.log(filterAsyncRoutes(asyncRoutesArr3, ['editor']))

输出结果:

[
    {
        "path": "/permission",
        "component": Layout,
        "name": "Permission",
        "meta": {
            "title": "Permission",
            "icon": "lock",
            "roles": [
                "admin",
                "editor"
            ]
        },
        "children": [
            {
                "path": "role",
                "name": "RolePermission",
                "meta": {
                    "title": "Role Permission",
                    "roles": [
                        "editor"
                    ]
                }
            }
        ]
    }
]