今天遇到了這么一個問題，一個管理系統(tǒng)的前端使用vue，通過路由控制用戶權(quán)限。由后端返回權(quán)限編碼列表，前端菜單列表需要對這些權(quán)限編碼進(jìn)行過濾。菜單是樹形結(jié)構(gòu)，如果父級菜單被過濾，則該父級下所有子級菜單也被過濾。由于是樹形結(jié)構(gòu)，肯定要用到遞歸，大致代碼如下：

// 菜單列表
const menuList = [{
    name: '系統(tǒng)管理',
    code: 'system_manage',
    children: [{
        name: '用戶管理',
        code: 'user_manage',
        children: [{
            name: '添加用戶',
            code: 'add_user'
        }, {
            name: '編輯用戶',
            code: 'edit_user'
        }, {
            name: '刪除用戶',
            code: 'del_user'
        }]
    }, {
        name: '角色管理',
        code: 'role_manage',
        children: [{
            name: '添加角色',
            code: 'add_role'
        }]
    }]
}, {
    name: '業(yè)務(wù)管理',
    code: 'bus_manage',
    children: [{
        name: '流程管理',
        code: 'process_manage'
    }]
}, {
    name: '訂單管理',
    code: 'order_manage'
}]

// 權(quán)限列表
const myMenuCode = ['system_manage', 'user_manage', 'add_user', 'order_manage']

const filterMenu = (menuList, menuCode) => {
    return menuList.filter(item => {
        return menuCode.indexOf(item.code) > -1
    }).map(item => {
        item = Object.assign({}, item)
        if (item.children) {
            item.children = filterMenu(item.children, menuCode)
        }
        return item
    })
}

// 過濾后的菜單
const myMenu = filterMenu(menuList, myMenuCode)

console.log(myMenu)