VUE路由权限思路

VUE路由权限思路
直接复制到浏览器即可看到过滤后的路由

代码实现

    function filterAsyncRoutes(routes, roles) {
        const res = []

        routes.forEach(route => {
            const tmp = { ...route }
            if (hasPermission(roles, tmp)) {
                console.log('执行');
                if (tmp.children) {
                    tmp.children = filterAsyncRoutes(tmp.children, roles)
                }
                res.push(tmp)
            }
        })

        return res
    }

    function hasPermission(roles, route) {
        console.log('hasPermission',roles, route);
        if (route.meta && route.meta.roles) {
            return roles.some(role => route.meta.roles.includes(role))
        } else {
            return true
        }
    }

    const asyncRoutes = [
        {
            path: '/example',
            redirect: '/example/table',
            name: 'Example',
            meta: { title: 'Example', icon: 'el-icon-s-help' },
            children: [
                {
                    path: 'aaa',
                    name: 'aaa',
                    component: () => import('@/views/table/index'),
                    meta: { title: 'aaa', icon: 'aaa' },
                    children: [
                        {
                            path: 'bbb',
                            name: 'bbb',
                            component: () => import('@/views/table/index'),
                            meta: { title: 'bbb', icon: 'bbb' }
                        },

                    ]
                },
                {
                    path: 'table',
                    name: 'Table',
                    component: () => import('@/views/table/index'),
                    meta: { title: 'Table', icon: 'table' ,roles: ['admin']}
                },
                {
                    path: 'list',
                    name: 'ExportExcel',
                    component: () => import('@/views/article/index'),
                    meta: { title: 'article', icon: 'table', roles: ['editor'] }
                }
            ]
        },
        {
            path: 'external-link',
            children: [
                {
                    path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
                    meta: { title: 'External Link', icon: 'link', }
                }
            ]
        },

        // 404
        { path: '*', redirect: '/404', hidden: true }
    ]


    console.log(filterAsyncRoutes(asyncRoutes, ['admin']))