vue-element-admin 後臺動態加載菜單

時間 2020-05-31

標籤 vue element admin 後臺動態加載菜單简体版

原文原文鏈接

前言

作後臺項目，權限驗證與安全性是很是重要的，vue-element-admin官方主要介紹了前端控制用戶菜單加載顯示，以及權限控制。這就帶來一些不便，服務端沒法（這裏可能說的絕對了，起碼實現起來不太友好）控制菜單的動態展現，用戶權限跟菜單相互關係的綁定。php

這裏咱們經過分析go-admin 代碼來讓你們一步步瞭解如何實現服務端控制前端菜單的展現的。前端

項目地址：

github:

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

碼雲（國內）:

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

注意：

這裏下載vue-element-admin的多語言版i18n，不是master分支。git

一、修改文件`\src\router\index.js`裏面的asyncRoutes變量爲

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

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

具體修改內容代碼在go-admin項目裏。github

三、修改文件src/api/user.js中調取服務端接口方法

具體修改內容代碼在go-admin項目裏。golang

四、這裏貼出服務端返回菜單數據結構

即：接口http://localhost:8090/dashboardjson

{
    "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文件夾裏面方法修改）。api

component：等於#爲一級參單，這裏有個容易忽略的細節，若是修改component文件很差會形成重複嵌套參單。這裏就用到vue的