js如何实现对树形数组的过滤？

Question

问题描述

需求：使用addRoutes实现动态路由，根据对应的权限，过滤出对应的路由表
js如何实现树形数组的过滤

像这样的一个树形数组asyncRouterMap

const asyncRouterMap = [
    {
        name:'Home',
        component:() => import('../views/Home.vue'),
        meta: { role: ['admin','super_admin'] }, //页面需要的权限
        path:'/',
        children:[
            { name:'userMan_1_1',
              component: () => import('../views/userMan/UserMan_1_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/userMan_1_1'
            },
            { name:'userMan_1_2',
              component: () => import('../views/userMan/UserMan_1_2.vue'),
              meta: { role: ['super_admin'] },
              path:'/userMan_1_2'
            },
            { name:'userMan_2_1',
              component: () => import('../views/userMan/UserMan_2_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/userMan_2_1'
            },
            { name:'userMan_2_2',
              component: () => import('../views/userMan/UserMan_2_2.vue'),
              meta: { role: ['super_admin'] },
              path:'/userMan_2_2'
            },
            { name:'userMan_3_1',
              component: () => import('../views/userMan/UserMan_3_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/userMan_3_1'
            },
            { name:'userMan_3_2',
              component: () => import('../views/userMan/UserMan_3_2.vue'),
              meta: { role: ['super_admin'] },
              path:'/userMan_3_2'
            },
            { name:'strategyMan_1_1',
              component: () => import('../views/strategyMan/strategyMan_1_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/strategyMan_1_1'
            },
            { name:'strategyMan_1_2',
              component: () => import('../views/strategyMan/strategyMan_1_2.vue'),
              meta: { role: ['super_admin'] },
              path:'/strategyMan_1_2'
            },
            { name:'strategyMan_2_1',
              component: () => import('../views/strategyMan/strategyMan_2_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/strategyMan_2_1'
            },
            { name:'strategyMan_2_2',
              component: () => import('../views/strategyMan/strategyMan_2_2.vue'),
              meta: { role: ['super_admin'] },
              path:'/strategyMan_2_2'
            }
        ]
    },
]

给定 role为admin
想要从asyncRouterMap中筛选出这样的结果result,即获取有admin权限的数据

const result = [
    {
        name:'Home',
        component:() => import('../views/Home.vue'),
        meta: { role: ['admin','super_admin'] }, //页面需要的权限
        path:'/',
        children:[
            { name:'userMan_1_1',
              component: () => import('../views/userMan/UserMan_1_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/userMan_1_1'
            },
            { name:'userMan_2_1',
              component: () => import('../views/userMan/UserMan_2_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/userMan_2_1'
            },
            { name:'userMan_3_1',
              component: () => import('../views/userMan/UserMan_3_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/userMan_3_1'
            },
            { name:'strategyMan_1_1',
              component: () => import('../views/strategyMan/strategyMan_1_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/strategyMan_1_1'
            },
            { name:'strategyMan_2_1',
              component: () => import('../views/strategyMan/strategyMan_2_1.vue'),
              meta: { role: ['admin','super_admin'] }, //页面需要的权限
              path:'/strategyMan_2_1'
            }
        ]
    },
]

Answer 1

递归即可。

function genAuthList(list, check) {  
  return list.reduce((p, it) => {  
    let children = [];  
    if (it.children) {  
      children = genAuthList(it.children, check);  
    }  
    return check(it) ? [...p, it, ...children] : p;  
  }, []);  
}

list是路由数组，check是一个校验方法，调用者可以自定义筛选条件，如

const result = genAuthList(  
  asyncRouterMap,  
  it => it.meta.roles.includes('admin')  
);