后端控制的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.