一个后台项目,前端使用vue2,需要通过后端返回的该用户的权限点,与所有的菜单列表进行过滤筛选,菜单是树形结构的。
// 菜单列表
const asyncRoutes = [
{
path: '/service',
component: Layout,
name: '办事大厅',
alwaysShow: true,
meta: {
title: '办事大厅',
icon: 'home'
},
children: [{
path: '/service/lobby',
name: '服务大厅',
meta: {
title: '服务大厅'
},
component: () =>
import ('@/views/service/lobby')
}]
},
{
path: '/device',
component: Layout,
name: '设备管理',
alwaysShow: true,
meta: {
title: '设备管理',
icon: 'diannao'
},
children: [{
path: '/device/deviceType',
name: '设备类型',
meta: {
title: '设备类型'
},
component: () =>
import ('@/views/device/deviceType')
}, {
path: '/device/deviceManager',
name: '设备管理',
meta: {
title: '设备管理'
},
component: () =>
import ('@/views/device/deviceManager')
}
]
}
]
// 权限列表
const menuList = ['办事大厅','服务大厅','设备管理']
const filterMenu = (asyncRoutes, menuList) => {
return asyncRoutes.filter(item => {
return menuList.indexOf(item.name) > -1
}).map(subItem=> {
subItem= Object.assign({}, subItem)
if (subItem.children) {
subItem.children = filterMenu(subItem.children, menuList)
}
return subItem
})
}
// 过滤后的菜单
const newMenu = filterMenu(asyncRoutes, menuList )
结果:成功过滤掉了设备类型