element-template-admin 路由过滤示例!

前端 · 2022-06-13 ·

路由过滤是权限系统的基础,也是提升用户UI的一项指标。

一般的路由过滤实现方式为,先将所有的路由定义好,然后从后台那获取用户所拥有的路由权限,通过用户路由权限比对项目中的所有路由,将符合用户路由的数据进行筛选返回新的路由。

    <script>
    // 用户拥有的路由,从后端接口获取
    var permissions = [{
        日志: [{
            permission: "查询所有日志",
            module: "日志"
        }, {
            permission: "搜索日志",
            module: "日志"
        }, {
            permission: "查询日志记录的用户",
            module: "日志"
        }]
    }, {
        日志2: [{
            permission: "查询所有日志2",
            module: "日志2"
        }, {
            permission: "搜索日志2",
            module: "日志2"
        }, {
            permission: "查询日志记录的用户2",
            module: "日志2"
        }]
    }];

    function permissionsToArray(permissions) {
        var permissionsToArray = [];

        permissions.map(function(x) {
            (Object.values(x)[0]).map(function(y) {
                permissionsToArray.push(y.permission);
            });
        });
        return permissionsToArray;

    }
    // 项目中所有的路由
    var routers = [{
        path: '/log',
        redirect: '/log',
        children: [{
            path: 'log',
            name: 'Log',
            component: () =>
                import ('@/views/log/index'),
            meta: {
                title: '日志管理',
                icon: 'dashboard',
                permission: '查询所有日志'
            }
        }]
    }, {
        path: '/admin',
        redirect: 'noRedirect',
        name: 'Admin',
        meta: {
            title: '权限管理',
            icon: 'nested',
            permission: '超级管理员所拥有权限'
        },
        children: [{
            path: 'user',
            name: 'User',
            meta: {
                title: '用户管理',
                permission: '超级管理员所拥有权限'
            },
            component: () =>
                import ('@/views/admin/user/UserIndex'), // Parent router-view
            redirect: 'noRedirect',
            children: [{
                path: 'list',
                component: () =>
                    import ('@/views/admin/user/UserList'),
                name: 'UserList',
                meta: {
                    title: '用户列表',
                    permission: '超级管理员所拥有权限'
                }
            }, {
                path: 'add',
                component: () =>
                    import ('@/views/admin/user/UserAdd'),
                name: 'UserAdd',
                meta: {
                    title: '用户添加',
                    permission: '超级管理员所拥有权限'
                }
            }, {
                path: 'info',
                component: () =>
                    import ('@/views/admin/user/UserInfo'),
                name: 'UserInfo',
                hidden: true,
                meta: {
                    title: '用户信息',
                    permission: '超级管理员所拥有权限'
                }
            }]
        }, {
            path: 'group/list',
            name: 'GroupList',
            component: () =>
                import ('@/views/admin/group/GroupList'),
            meta: {
                title: '分组管理',
                permission: '超级管理员所拥有权限'
            }
        }, {
            path: 'group/add',
            name: 'GroupAdd',
            hidden: true,
            component: () =>
                import ('@/views/admin/group/GroupAdd'),
            meta: {
                title: '分组添加',
                permission: '超级管理员所拥有权限'
            }
        }, {
            path: 'group/auths',
            name: 'GroupAuths',
            hidden: true,
            component: () =>
                import ('@/views/admin/group/GroupAuths'),
            meta: {
                title: '分组权限',
                permission: '超级管理员所拥有权限'
            }
        }]
    }];
    </script>
    <script type="text/javascript">
    // 判断用户是否有某个路由的权限
    function hasPermission(auths, route) {

        if (route.meta && route.meta.permission) {
            return auths.some(item => item === route.meta.permission);
        }
        return true;
    }
    // 因为路由是嵌套的,通过递归遍历所有的路由,最总返回符合用户权限的路由
    function filterAsyncRoutes(routes, auths) {
        var res = [];
        routes.forEach(route => {
            var tmp = {...route};
            if (hasPermission(auths, tmp)) {
                if (tmp.children) {
                    tmp.children = filterAsyncRoutes(tmp.children, auths);
                }
                res.push(tmp)
            }
        });
        return res;

    }
    var accessRoutes = filterAsyncRoutes(routers, permissionsToArray(permissions));
    console.log(accessRoutes);
    </script>
%