vue-element-admin框架动态路由（二）

看客过客皆是客

已于 2022-06-23 15:39:18 修改

阅读量499

点赞数 1

分类专栏： vue-element-admin 文章标签： vue.js 前端

于 2021-12-27 13:23:37 首次发布

本文链接：https://blog.csdn.net/qq_32812063/article/details/122169859

版权

vue-element-admin 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文详细介绍了在一个权限管理系统中，如何通过store/modules/permission.js的generateRoutes方法和filterAsyncRoutes函数实现根据用户角色动态过滤和加载菜单。系统通过接口获取菜单数据，并通过hasPermission函数检查角色权限，过滤出用户可访问的路由，实现菜单的动态展示。涉及的技术包括Vue.js、路由权限控制和动态加载组件。

摘要由CSDN通过智能技术生成

菜单改造分析

{
  path: '/permission',
  component: Layout,
  alwaysShow: true, //一直显示根路由
  meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所有的子路由都继承了这个权限
  children: [{
    path: 'index',
    component: ()=>import('permission/index'),
    name: 'permission',
    meta: {
      title: 'permission',
      icon: 'lock', //图标
      roles: ['admin','editor'] //或者你可以给每一个子路由设置自己的权限
    }
  }]
}

store/modules目录下的permission.js的generateRoutes方法

const actions = {
    generateRoutes({ commit }, roles) {
        return new Promise((resolve, reject) => {
            getMenuList()
                .then((response) => {
                    let accessedRoutes; //获取菜单数据
                    if (response.code == 200) {
                        accessedRoutes = filterAsyncRoutes(response.data, roles); //存储菜单数据到store
                    }
                    commit("SET_ROUTES", accessedRoutes);
                    resolve(accessedRoutes);
                })
                .catch((error) => {
                    reject(error);
                });
        });
    },
};

store/modules下的permission.js中的 generateRoutes() 和 filterAsyncRoutes()方法如下所示：

export function filterAsyncRoutes(routes, roles) {
    const res = [];
    routes.forEach((route) => {
        const tmp = {...route };
        if (hasPermission(roles, tmp)) {
            const component = tmp.component;
            if (route.component) {
                if (component == "Layout") {
                    tmp.component = Layout;
                } else {
                    // 接口组件字符串转换成组件对象
                    tmp.component = (resolve) =>
                        require([`@/views${component}`], resolve);
                }
                if (tmp.children) {
                    tmp.children = filterAsyncRoutes(tmp.children, roles);
                }
            }
            res.push(tmp);
        }
    });
    return res;
}

接口请求

{
    "code": "200",
    "data": [
        {
            "path": "/system",
            "component": "Layout",
            "alwaysShow": true,
            "name": "系统管理",
            "meta": {
                "title": "系统管理",
                "icon": "table",
                "roles": [
                    "admin"
                ]
            },
            "children": [
                {
                    "path": "user",
                    "component": "system/user/index",
                    "name": "用户管理",
                    "meta": {
                        "title": "用户管理",
                        "icon": "user",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "role",
                    "component": "system/role/index",
                    "name": "角色管理",
                    "meta": {
                        "title": "角色管理",
                        "icon": "peoples",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "menu",
                    "component": "system/menu/index",
                    "name": "菜单管理",
                    "meta": {
                        "title": "菜单管理",
                        "icon": "tree-table",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "dept",
                    "component": "system/dept/index",
                    "name": "部门管理",
                    "meta": {
                        "title": "部门管理",
                        "icon": "tree",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "dict",
                    "component": "system/dict/index",
                    "name": "字典管理",
                    "meta": {
                        "title": "字典管理",
                        "icon": "education",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "client",
                    "component": "system/client/index",
                    "name": "客户端管理",
                    "meta": {
                        "title": "客户端管理",
                        "icon": "tab",
                        "roles": [
                            "admin"
                        ]
                    }
                }
            ]
        },
        {
            "path": "/pms",
            "component": "Layout",
            "alwaysShow": true,
            "name": "商品管理",
            "meta": {
                "title": "商品管理",
                "icon": "phone",
                "roles": [
                    "admin"
                ]
            },
            "children": [
                {
                    "path": "goods",
                    "component": "pms/goods/index",
                    "name": "商品列表",
                    "meta": {
                        "title": "商品列表",
                        "icon": "component",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "goods-detail",
                    "component": "pms/goods/detail",
                    "name": "商品上架",
                    "meta": {
                        "title": "商品上架",
                        "icon": "component",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "category",
                    "component": "pms/category/index",
                    "name": "商品分类",
                    "meta": {
                        "title": "商品分类",
                        "icon": "component",
                        "roles": [
                            "admin"
                        ]
                    }
                },
                {
                    "path": "brand",
                    "component": "pms/brand/index",
                    "name": "品牌管理",
                    "meta": {
                        "title": "品牌管理",
                        "icon": "component",
                        "roles": [
                            "admin"
                        ]
                    }
                }
            ]
        },
        {
            "path": "/oms",
            "component": "Layout",
            "alwaysShow": true,
            "name": "订单管理",
            "meta": {
                "title": "订单管理",
                "icon": "shopping",
                "roles": [
                    "admin"
                ]
            },
            "children": [
                {
                    "path": "order",
                    "component": "oms/order",
                    "name": "订单列表",
                    "meta": {
                        "title": "订单列表",
                        "icon": "component",
                        "roles": [
                            "admin"
                        ]
                    }
                }
            ]
        },
        {
            "path": "/ums",
            "component": "Layout",
            "alwaysShow": true,
            "name": "会员管理",
            "meta": {
                "title": "会员管理",
                "icon": "user",
                "roles": [
                    "admin"
                ]
            },
            "children": [
                {
                    "path": "user",
                    "component": "ums/user/index",
                    "name": "会员列表",
                    "meta": {
                        "title": "会员列表",
                        "icon": "peoples",
                        "roles": [
                            "admin"
                        ]
                    }
                }
            ]
        },
        {
            "path": "/sms",
            "component": "Layout",
            "alwaysShow": true,
            "name": "营销管理",
            "meta": {
                "title": "营销管理",
                "icon": "number",
                "roles": [
                    "admin"
                ]
            },
            "children": [
                {
                    "path": "advert",
                    "component": "sms/advert/index",
                    "name": "广告管理",
                    "meta": {
                        "title": "广告管理",
                        "icon": "documentation",
                        "roles": [
                            "admin",
                            "root"
                        ]
                    }
                }
            ]
        },
        {
            "path": "/waiter",
            "component": "Layout",
            "alwaysShow": true,
            "name": "员工管理",
            "meta": {
                "title": "员工管理",
                "icon": "table",
                "roles": [
                    "admin"
                ]
            },
            "children": [
                {
                    "component": "waiter/index",
                    "name": "员工管理",
                    "meta": {
                        "title": "员工管理",
                        "icon": "component",
                        "roles": [
                            "admin"
                        ]
                    }
                }
            ]
        }
    ],
    "msg": "一切ok"
}