vue-element-admin 后台动态加载菜单

guyan0319

前言

做后台项目,权限验证与安全性是非常重要的,vue-element-admin官方主要介绍了前端控制用户菜单加载显示,以及权限控制。这就带来一些不便,服务端无法(这里可能说的绝对了,起码实现起来不太友好)控制菜单的动态展示,用户权限跟菜单相互关系的绑定。

这里我们通过分析go-admin 代码来让大家一步步了解如何实现服务端控制前端菜单的展示的。

项目地址:

github:

https://github.com/guyan0319/...

码云(国内):

https://gitee.com/jason0319/g...

注意:

这里下载vue-element-admin的多语言版i18n,不是master分支。

1、修改文件\src\router\index.js里面的asyncRoutes变量为

export const asyncRoutes = [
  { path: '*', redirect: '/404', hidden: true }
]

2、修改文件 src\store\modules\permission.js

具体修改内容代码在go-admin项目里。

3、修改文件src/api/user.js中调取服务端接口方法

具体修改内容代码在go-admin项目里。

4、这里贴出服务端返回菜单数据结构

即:接口http://localhost:8090/dashboard

{
    "code": 20000,
    "data": [{
        "children": [{
            "children": [{
                "alwaysShow": true,
                "component": "/system/user/create/index",
                "hidden": false,
                "id": 27,
                "meta": {
                    "icon": "#",
                    "status": true,
                    "title": "添加用户"
                },
                "name": "添加用户",
                "path": "/system/user/create",
                "pid": 2,
                "url": "/user/create"
            }, {
                "component": "/system/user/list/index",
                "hidden": false,
                "id": 28,
                "meta": {
                    "icon": "#",
                    "status": true,
                    "title": "用户列表"
                },
                "name": "用户列表",
                "path": "/system/user/list",
                "pid": 2,
                "url": "/user/index"
            }, {
                "alwaysShow": true,
                "component": "/system/user/edit/index",
                "hidden": true,
                "id": 29,
                "meta": {
                    "icon": "#",
                    "status": true,
                    "title": "用户编辑"
                },
                "name": "用户编辑",
                "path": "/system/user/edit/:id(\\d+)",
                "pid": 2,
                "url": "/user/edit"
            }],
            "component": "/system/user/index",
            "hidden": false,
            "id": 2,
            "meta": {
                "icon": "#",
                "status": true,
                "title": "用户管理"
            },
            "name": "用户管理",
            "path": "/system/user",
            "pid": 1,
            "url": "/user"
        }, {
            "component": "/system/menu/index",
            "hidden": false,
            "id": 3,
            "meta": {
                "icon": "#",
                "status": true,
                "title": "菜单管理"
            },
            "name": "菜单管理",
            "path": "/system/menu",
            "pid": 1,
            "url": "/menu"
        }, {
            "alwaysShow": true,
            "component": "/system/role/index",
            "hidden": false,
            "id": 26,
            "meta": {
                "icon": "#",
                "status": true,
                "title": "角色管理"
            },
            "name": "角色管理",
            "path": "/system/role",
            "pid": 1,
            "url": "/roles"
        }],
        "component": "#",
        "hidden": false,
        "id": 1,
        "meta": {
            "icon": "fafa-adjust",
            "status": true,
            "title": "系统管理"
        },
        "name": "系统管理",
        "path": "#",
        "pid": 0,
        "url": "#"
    }, {
        "alwaysShow": true,
        "children": [{
            "alwaysShow": true,
            "component": "/article/create/index",
            "hidden": false,
            "id": 31,
            "meta": {
                "icon": "#",
                "status": true,
                "title": "创建文章"
            },
            "name": "创建文章",
            "path": "/article/create",
            "pid": 30,
            "url": "/article/create"
        }, {
            "alwaysShow": true,
            "component": "/article/edit/index",
            "hidden": true,
            "id": 32,
            "meta": {
                "icon": "#",
                "status": true,
                "title": "文章编辑"
            },
            "name": "文章编辑",
            "path": "/article/edit/:id(\\d+)",
            "pid": 30,
            "url": "/article/edit"
        }, {
            "alwaysShow": true,
            "component": "/article/list/index",
            "hidden": false,
            "id": 33,
            "meta": {
                "icon": "#",
                "status": true,
                "title": "文章列表"
            },
            "name": "文章列表",
            "path": "/article/list",
            "pid": 30,
            "url": "/article/list"
        }],
        "component": "#",
        "hidden": false,
        "id": 30,
        "meta": {
            "icon": "#",
            "status": true,
            "title": "内容管理"
        },
        "name": "内容管理",
        "path": "#",
        "pid": 0,
        "url": "/article"
    }]
}

这里需要说明一下,返回的json数据结构中几个关键点:

url:这个是对应调取服务端接口,用于服务端控制路由权限,前端要按相应的接口调用(在api文件夹里面方法修改)。

component:等于#为一级参单,这里有个容易忽略的细节,如果修改component文件不好会造成重复嵌套参单。这里就用到vue的

 <router-view />

hidden:是否隐藏菜单显示,true:隐藏,false:显示。

5、实现的效果图

小结:

  • 所有代码可在项目go-admin中找到,故有些代码没有在此展示,以免浪费大家篇幅。
  • 前后端分离,服务端用什么开发语言无所谓,可用java、go、php等,本项目用的go,感兴趣可以clone。
  • 需要注意跨域问题。

至此,服务端控制vue-element-admin 动态加载参单实现方式就讲完了,如有任何问题或建议欢迎提issues

参考:

https://blog.csdn.net/acoolpe...

links

阅读 4.3k

golang开发笔记
微不足道的进步也是进步,学习是一个不断积累的过程。

坚持但不盲目

1.3k 声望
244 粉丝
0 条评论

坚持但不盲目

1.3k 声望
244 粉丝
宣传栏