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

前言

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

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

项目地址：

github:

https://github.com/guyan0319/go-admin

码云（国内）:

https://gitee.com/jason0319/go-admin

注意：

这里下载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/acoolper/article/details/97136553

links

• 目录