后端控制的Vue動態菜單實現

唐志濤 王佳琪 張濤

【摘 要】隨著前端技術的不斷發展，前端重要性日益凸顯。Vue是為了滿足當前環境下前端快速迭代開發而產生的新框架，利用Vue可高效率的完成各種平臺系統的前端開發。信息化應用系統幾乎都離不開菜單以及權限控制，而傳統基于Vue的菜單權限控制完全放置于前端進行，由于前端可見性，傳統方式存在極大安全隱患和性能不足問題。本文主要介紹如何利用Vue動態路由，由后端進行菜單權限控制，從而解決傳統菜單實現方式的安全性不足，性能低的問題。

【關鍵詞】Vue;菜單;路由;越權;動態掛載

一、Vue簡介

隨著時代不斷地進步，智能手機設備與PC設備越來越普及，人們對Web應用的前端體驗要求也變得越來越高。導致Web前端開發的代碼量，開發難度在不斷增加。直接操作DOM的開發模式已經難以滿足現有需求，基于MVVM模式的輕量級前端框架Vue應運而生。

Vue是一套漸進式前端JavaScript框架，主要用于為用戶構建單頁面應用。與傳統前端框架有所不同，Vue采用的是自底向上，模塊式增量開發的設計模式，并且Vue的核心將關注點放在了視圖層，通過雙向數據綁定的形式操作數據來間接改變DOM，極大程度上縮減了直接操作DOM所花費的成本。因此，Vue成為當前流行的三大前端框架之一。

二、基于Vue的傳統菜單實現原理

傳統基于Vue展現動態菜單的方式是利用Vue動態路由特性，將全部菜單編制成前端路由代碼，通過用戶角色，由前端Vue代碼控制展現哪些菜單。

具體方式如下：

1）在前端代碼中定義好全部路由表，并且在路由表上添加相應的權限信息字段進行標記，示例如下：

const routerMap=[{

path：'/permission'，

component：Layout，

redirect：'/permission/index'，

alwaysShow：true，//will always show the root menu

meta：{

title：'permission'，

icon：'lock'，

roles：['admin'，'editor']//you can set roles in root nav

}，

children：[{

path：'page'，

component：（）=>import（'@/views/permission/page'），

name：'pagePermission'，

meta：{

title：'pagePermission'，

roles：['admin']//or you can only set roles in sub nav

}

}，{

path：'directive'，

component：（）=>import（'@/views/permission/directive'），

name：'directivePermission'，

meta：{

title：'directivePermission'

//if do not set roles，means：this page does not require permission

}

}]

}]

2）菜單展現時，全局路由守衛會對用戶的登錄狀態進行判斷，如果用戶沒有登錄則會跳轉到登錄頁。已經登錄的用戶，在取得后臺返回的用戶權限信息（roles角色字段）后，會根據權限下所匹配的路由來顯示出當前用戶所具有權限的菜單信息。

3）在跳轉的路由地址發生變化時，會判斷所要跳轉的路由地址是否為路由表上的路由，沒有則會返回系統定義好的401越權界面。

三、傳統菜單實現方式的效果分析

傳統的菜單實現方式可在用戶登錄后對路由進行權限判斷，根據角色信息來匹配需要加載出的路由，通過角色名稱對用戶權限進行控制。同時，在路由的跳轉地址發生變化時也會對其進行判斷，從而防止越權行為的發生。

但傳統的菜單實現方式也存在如下缺點：

1）每次都會加載所有的路由。即使是用戶沒有權限訪問的路由，依舊會進行加載。這樣一來如果路由的總數很龐大，就會對系統的性能產生影響。另外，由于前端代碼為明碼，無關用戶可以查看到系統所有菜單，存在安全隱患。

2）菜單配置不靈活。由于菜單信息是在前端定義的，如果需要更改某個顯示文字的信息或者角色權限信息，需要更改代碼并重新編譯。

3）越權控制精細度不夠。路由跳轉時僅僅判斷跳轉的路由是否在全部的路由表中，而無法判斷是否為當前用戶有權限訪問的路由。

四、后端控制的Vue動態菜單實現原理

為了解決傳統菜單實現方式的多個問題，我們采取了將菜單與路由完全由后端返回的方式對其進行了改造。

我們來看一下路由的基本定義：

{

name："login"，

path："/login"，

component：（）=>import（"@/pages/Login.vue"）

}

其中name，path字段可由后端直接進行返回，由于component字段內容為非字符串，所以前端需對后端傳遞的component值做轉換處理，將component字段轉換成組件引入形式。

菜單渲染實現過程為：1）用戶登錄時，前端將用戶身份信息傳遞給后端;2）后端接收到當前用戶的信息后，去數據庫中查找此用戶下對應的菜單信息（菜單信息已提前通過菜單配置功能錄入到系統數據庫中，其中包括name，path，component三個必須字段，也可添加icon，label等擴展字段）;3）后端查找到對應菜單信息后，以Json的形式返回給前端;4）前端接收到返回信息后對component字段進行處理，處理完成后再將處理好的路由信息通過addRoutes動態掛載到當前用戶的路由信息表中;5）接下來，在用戶登錄后進行菜單渲染時，只渲染后臺傳遞過來的當前用戶所具有的的菜單信息即可。

在跳轉的路由地址發生變化時，會判斷所要跳轉的路由地址是否為后端傳遞過來的路由表上的路由，沒有則會返回系統定義好的401越權界面。

五、后端控制的菜單實現方式效果分析

新型菜單實現方式不僅擁有傳統實現方式的優點，同時也摒除了傳統菜單實現方式的缺點。

第一，在用戶登錄后系統只需根據后臺的返回結果來加載用戶有權限訪問的路由即可。不會像傳統方式那樣每次都會加載所有路由，這使得系統的性能得到大大提升。

第二，系統菜單信息完全交由后臺來傳遞，每次需要更改菜單信息時，可在頁面進行靈活配置，且不需要更改代碼也不需要重新編譯。可大大節約更改用戶權限的時間成本。

第三，此種菜單實現方式可細化控制到用戶所擁有權限的菜單信息，當用戶發生越權行為時，系統可根據當前用戶所能有權限訪問的菜單進行匹配，從安全角度來說，控制越權的精細度更加細化，系統安全水平能得到大大提升。

【參考文獻】

[1]喻瑩瑩， 李新， 陳遠平. 前后端分離的終端自適應動態表單設計[J]. 計算機系統應用， 2018， 27（4）：70-75.

[2]曠志光， 紀婷婷， 吳小麗. 基于Vue.js的后臺單頁應用管理系統的研究與實現[J]. 現代計算機， 2017（30）：51-55.