唐志濤 王佳琪 張濤

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

【關(guān)鍵詞】Vue;菜單;路由;越權(quán);動態(tài)掛載

一、Vue簡介

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

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

二、基于Vue的傳統(tǒng)菜單實現(xiàn)原理

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

具體方式如下：

1）在前端代碼中定義好全部路由表，并且在路由表上添加相應(yīng)的權(quán)限信息字段進(jìn)行標(biāo)記，示例如下：

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）菜單展現(xiàn)時，全局路由守衛(wèi)會對用戶的登錄狀態(tài)進(jìn)行判斷，如果用戶沒有登錄則會跳轉(zhuǎn)到登錄頁。已經(jīng)登錄的用戶，在取得后臺返回的用戶權(quán)限信息（roles角色字段）后，會根據(jù)權(quán)限下所匹配的路由來顯示出當(dāng)前用戶所具有權(quán)限的菜單信息。

3）在跳轉(zhuǎn)的路由地址發(fā)生變化時，會判斷所要跳轉(zhuǎn)的路由地址是否為路由表上的路由，沒有則會返回系統(tǒng)定義好的401越權(quán)界面。

三、傳統(tǒng)菜單實現(xiàn)方式的效果分析

傳統(tǒng)的菜單實現(xiàn)方式可在用戶登錄后對路由進(jìn)行權(quán)限判斷，根據(jù)角色信息來匹配需要加載出的路由，通過角色名稱對用戶權(quán)限進(jìn)行控制。同時，在路由的跳轉(zhuǎn)地址發(fā)生變化時也會對其進(jìn)行判斷，從而防止越權(quán)行為的發(fā)生。

但傳統(tǒng)的菜單實現(xiàn)方式也存在如下缺點：

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

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

3）越權(quán)控制精細(xì)度不夠。路由跳轉(zhuǎn)時僅僅判斷跳轉(zhuǎn)的路由是否在全部的路由表中，而無法判斷是否為當(dāng)前用戶有權(quán)限訪問的路由。

四、后端控制的Vue動態(tài)菜單實現(xiàn)原理

為了解決傳統(tǒng)菜單實現(xiàn)方式的多個問題，我們采取了將菜單與路由完全由后端返回的方式對其進(jìn)行了改造。

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

{

name："login"，

path："/login"，

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

}

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

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

在跳轉(zhuǎn)的路由地址發(fā)生變化時，會判斷所要跳轉(zhuǎn)的路由地址是否為后端傳遞過來的路由表上的路由，沒有則會返回系統(tǒng)定義好的401越權(quán)界面。

五、后端控制的菜單實現(xiàn)方式效果分析

新型菜單實現(xiàn)方式不僅擁有傳統(tǒng)實現(xiàn)方式的優(yōu)點，同時也摒除了傳統(tǒng)菜單實現(xiàn)方式的缺點。

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

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

第三，此種菜單實現(xiàn)方式可細(xì)化控制到用戶所擁有權(quán)限的菜單信息，當(dāng)用戶發(fā)生越權(quán)行為時，系統(tǒng)可根據(jù)當(dāng)前用戶所能有權(quán)限訪問的菜單進(jìn)行匹配，從安全角度來說，控制越權(quán)的精細(xì)度更加細(xì)化，系統(tǒng)安全水平能得到大大提升。

【參考文獻(xiàn)】

[1]喻瑩瑩， 李新， 陳遠(yuǎn)平. 前后端分離的終端自適應(yīng)動態(tài)表單設(shè)計[J]. 計算機(jī)系統(tǒng)應(yīng)用， 2018， 27（4）：70-75.

[2]曠志光， 紀(jì)婷婷， 吳小麗. 基于Vue.js的后臺單頁應(yīng)用管理系統(tǒng)的研究與實現(xiàn)[J]. 現(xiàn)代計算機(jī)， 2017（30）：51-55.