前言
做後臺項目，權限驗證與安全性是非常重要的，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": false,
"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": "/system/article/create/index",
"hidden": false,
"id": 31,
"meta": {
"icon": "#",
"status": true,
"title": "創建文章"
},
"name": "創建文章",
"path": "/system/article/create",
"pid": 30,
"url": "/article/create"
}, {
"alwaysShow": true,
"component": "/system/article/edit/index",
"hidden": false,
"id": 32,
"meta": {
"icon": "#",
"status": true,
"title": "文章編輯"
},
"name": "文章編輯",
"path": "/system/article/edit",
"pid": 30,
"url": "/article/edit"
}, {
"alwaysShow": true,
"component": "/system/article/list/index",
"hidden": false,
"id": 33,
"meta": {
"icon": "#",
"status": true,
"title": "文章列表"
},
"name": "文章列表",
"path": "/system/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