CN110442326A - 一种基于Vue简化前后端分离权限控制的方法及其系统 - Google Patents

Abstract

本发明公开了一种基于Vue简化前后端分离权限控制的方法及其系统，包括以下步骤，服务器后端提供所有权限列表；使用Vue作为前端模板引擎；不同用户由前端登录，输入不同登陆者的身份信息；所述服务器后端根据不同的所述身份信息判断其拥有的权限并通过接口信息传递；前端生成动态路由，调用所述接口信息，获取系统登陆者的权限列表，根据权限列表动态生成前端路由表，确定访问者的可访问路由列表；有权限则跳转成功，否则失败跳转到404页或者提示无访问权限。本发明的有益效果：能够减少验证权限的方法的输入，并且在所有请求发出前，进行统一的权限验证，从而实现Vue前后端开发中的前端的路由权限控制。

Description

一种基于Vue简化前后端分离权限控制的方法及其系统

技术领域

本发明涉及应用系统安全的技术领域，尤其涉及一种基于Vue简化前后端分离权限控制的方法及其系统。

背景技术

近年来随着软件开发过程中前后端分离框架的不断发展，这种开发流程凭借自身的诸多优点，已经成为互联网项目开发的业界标准使用方式；前后端分离使得开发的过程中，前端和后端可以并行。但在开发的过程中，对于页面上的权限控制，前端控制比较而言是有些弱的，换言之，如果无法支持，会导致权限控制更复杂，多出很多繁杂的控制，继而影响开发进度以及后续的系统维护。故而前端就需要有一套比较完善且通用的权限控制体系，能够适用于大部分的应用系统。

发明内容

本部分的目的在于概述本发明的实施例的一些方面以及简要介绍一些较佳实施例。在本部分以及本申请的说明书摘要和发明名称中可能会做些简化或省略以避免使本部分、说明书摘要和发明名称的目的模糊，而这种简化或省略不能用于限制本发明的范围。

鉴于上述现有存在的问题，提出了本发明。

因此，本发明解决的一个技术问题是：提供一种基于Vue简化前后端分离权限控制的方法，实现页面跳转的权限控制。

为解决上述技术问题，本发明提供如下技术方案：一种基于Vue简化前后端分离权限控制的方法，包括以下步骤，服务器后端提供所有权限列表；使用Vue作为前端模板引擎；不同用户由前端登录，输入不同登陆者的身份信息；所述服务器后端根据不同的所述身份信息判断其拥有的权限并通过接口信息传递；前端生成动态路由，调用所述接口信息，获取系统登陆者的权限列表，根据权限列表动态生成前端路由表，确定访问者的可访问路由列表；有权限则跳转成功，否则失败跳转到404页或者提示无访问权限。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述前端框架组件包括路由、控制器、指令、内置http模块以及整体模块定义配置，能够对前端页面的控制和绑定。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述控制和所述绑定还包括，在网页端的配置中实现路由，并在路由渲染页面之前通过的按需加载将页面对应的控制器动态加载进来；控制器负责将数据与页面进行绑定，监听页面中的事件并执行相应操作，通过依赖注入的方式引入内置http模块后可发送请求并对响应回的信息进行处理加工。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述前端框架还包括以下搭建步骤，按需加载，在网页端的配置中实现路由，并在路由渲染页面之前通过的按需加载将页面对应的控制器动态加载进来；前端分页，包括页面显示和控制器中的逻辑处理部分，构建单独的分页页面和分页组件，所述分页组件负责初始化相关分页参数以及实现分页需要的操作函数；树形插件，显示众多的存在父子关系的节点数据，并对其进行增删改或选择操作；页面编辑，包括页面编辑器通过创建相关的页面参数指令进行编辑。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述服务器后端还包括数据库模块、存储模块、登录验证模块以及通用模块。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述数据库模块包括如下设置步骤，数据库连接，包括数据库的地址、端口、用户名、密码配置以及连接创建函数，当其他程序需要调用时直接调取文件；数据操作集合，将常用的查询函数封装成统一的函数，根据传递参数、条件的不同进而执行不同的查询，获取结果后统一返回；声明创建模块，需要的集合在程序中进行声明创建，包含声明的各种集合、数据操作集合，调用需要的相应集合。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述存储模块包括如下设置步骤，连接数据库以及封装数据库操作；将需要的创建连接函数、存取函数在组件中实现；设置有效时间的函数；将请求传来的指令输入验证函数；在登录完成后进行调用函数保存到内存数据库，需要时调用；获取请求中的身份信息，以此为钥匙查看内存数据库中是否存在，以便在请求处理之前进行用户是否登录的验证同时重新保存会话。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述登录验证模块包括如下设置步骤，登录验证策略，处理登录的程序调用登录验证策略，查看用户名、密码是否规范合法；注册验证策略，在注册请求处理时，调用注册验证策略，查看用户相关信息是否规范，具体的规则需要根据应用实际情况来决定，合法则继续执行，调用数据库模块将用户信息存储到数据库中，否则返回错误信息的响应。

作为本发明所述的基于Vue简化前后端分离权限控制的方法的一种优选方案，其中：所述通用模块包括分页和发送邮件的功能；所述通用模块由一个总的文件来调用分页和发送邮件的组件，分页组件根据请求传递来的参数来设置数据获取的条件，同时需要调用数据库连接组件，获取需要的部分数据并传回前端；发送邮件组件时调用系统的配置文件，获取发送方的地址和密码，设置邮件相关主题、内容，实现邮件的发送。

本发明解决的另一个技术问题是：提供一种基于Vue简化前后端分离权限控制的系统，实现页面跳转的权限控制。

为解决上述技术问题，本发明提供如下技术方案：一种基于Vue简化前后端分离权限控制的系统，包括通过网络通信协议连接的前端和服务器后端，所述前端用于网页端的操作，所述服务器后端用于网页后端的服务。

本发明的有益效果：能够减少验证权限的方法的输入，并且在所有请求发出前，进行统一的权限验证，从而实现Vue前后端开发中的前端的路由权限控制。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。其中：

图1为本发明第一种实施例所述基于Vue简化前后端分离权限控制的方法的粗流程结构示意图；

图2为本发明第一种实施例所述基于Vue简化前后端分离权限控制的方法的整体流程结构示意图；

图3为本发明第一种实施例所述基于Vue简化前后端分离权限控制的方法的框架整体结构示意图；

图4为本发明第二种实施例所述基于Vue简化前后端分离权限控制的系统的原理结构示意图；

图5示意为本发明所述不同并发量不同鉴权方式的处理延时测试结果；

图6示意为本发明所述不同并发量不同鉴权方式的流量消耗测试结果。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合说明书附图对本发明的具体实施方式做详细的说明，显然所描述的实施例是本发明的一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明的保护的范围。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是本发明还可以采用其他不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本发明内涵的情况下做类似推广，因此本发明不受下面公开的具体实施例的限制。

其次，此处所称的“一个实施例”或“实施例”是指可包含于本发明至少一个实现方式中的特定特征、结构或特性。在本说明书中不同地方出现的“在一个实施例中”并非均指同一个实施例，也不是单独的或选择性的与其他实施例互相排斥的实施例。

本发明结合示意图进行详细描述，在详述本发明实施例时，为便于说明，表示器件结构的剖面图会不依一般比例作局部放大，而且所述示意图只是示例，其在此不应限制本发明保护的范围。此外，在实际制作中应包含长度、宽度及深度的三维空间尺寸。

同时在本发明的描述中，需要说明的是，术语中的“上、下、内和外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一、第二或第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

本发明中除非另有明确的规定和限定，术语“安装、相连、连接”应做广义理解，例如：可以是固定连接、可拆卸连接或一体式连接；同样可以是机械连接、电连接或直接连接，也可以通过中间媒介间接相连，也可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

如在本申请所使用的，术语“组件”、“模块”、“系统”等等旨在指代计算机相关实体，该计算机相关实体可以是硬件、固件、硬件和软件的结合、软件或者运行中的软件。例如，组件可以是，但不限于是：在处理器上运行的处理、处理器、对象、可执行文件、执行中的线程、程序和/或计算机。作为示例，在计算设备上运行的应用和该计算设备都可以是组件。一个或多个组件可以存在于执行中的过程和/或线程中，并且组件可以位于一个计算机中以及/或者分布在两个或更多个计算机之间。此外，这些组件能够从在其上具有各种数据结构的各种计算机可读介质中执行。这些组件可以通过诸如根据具有一个或多个数据分组(例如，来自一个组件的数据，该组件与本地系统、分布式系统中的另一个组件进行交互和/或以信号的方式通过诸如互联网之类的网络与其它系统进行交互)的信号，以本地和/或远程过程的方式进行通信。

实施例1

随着技术的发展，web应用的开发模式经历了一系列的演变，纵观web应用开发模式的历史，就是前后端从紧密联系到不断分离的过程。从最开始的不分前后端，展现逻辑与业务逻辑混杂，耦合度非常高。到了后端，前后端的分工开始清晰，但依然不够清晰，前端开发太过依赖于开发环境，前后端的职责又不够明朗，沟通成本和维护成本上升。

参照图1～3的示意，因此本实施例提出一种基于Vue简化前后端分离权限控制的方法，该方法具体包括如下步骤，服务器后端200提供所有权限列表；使用Vue作为前端模板引擎；不同用户由前端100登录，输入不同登陆者的身份信息；服务器后端200根据不同的身份信息判断其拥有的权限并通过接口信息传递；前端100生成动态路由，调用接口信息，获取系统登陆者的权限列表，根据权限列表动态生成前端路由表，确定访问者的可访问路由列表；有权限则跳转成功，否则失败跳转到404页或者提示无访问权限。

本实施例还需要说明的是，前端100框架组件包括路由101、控制器102、指令103、内置http模块104以及整体模块定义配置105，能够对前端页面的控制和绑定。且该控制和绑定还包括，

在网页端的配置中实现路由，并在路由渲染页面之前通过的按需加载将页面对应的控制器动态加载进来；控制器负责将数据与页面进行绑定，监听页面中的事件并执行相应操作，通过依赖注入的方式引入内置http模块后可发送请求并对响应回的信息进行处理加工。

前端框架还包括以下搭建步骤，

按需加载，在网页端的配置中实现路由，并在路由渲染页面之前通过的按需加载将页面对应的控制器动态加载进来；动态地按需加载极大地简化了初始页的文件处理，使得文件加载更加模块化以及条理化，而不是原有的那些繁琐不明的加载语句堆叠在一起，更没有了初始显示存在延迟的问题。

前端分页，包括页面显示和控制器中的逻辑处理部分，构建单独的分页页面和分页组件，分页组件负责初始化相关分页参数以及实现分页需要的操作函数；前页处理函数则是对应上一页的鼠标点击事件，判断页面是否大于零，大于则页码减一并调用数据获取函数，反之则不进行处理。首页处理函数则是直接将页码设置为1并调用数据获取函数，而尾页处理函数则是直接将页码设置为总页码的数目并调用数据获取函数。而最重要的数据获取函数主要是发送http请求，传递相关的参数以对应后端数据获取的集合，并且获取成功后将后端传来的关于页面的信息进行数据绑定。

树形插件，显示众多的存在父子关系的节点数据，并对其进行增删改或选择操作；

页面编辑，包括页面编辑器通过创建相关的页面参数指令进行编辑。

进一步的，本实施例中服务器后端200还包括数据库模块201、存储模块202、登录验证模块203以及通用模块204。其中，

数据库模块201包括如下设置步骤，数据库连接，包括数据库的地址、端口、用户名、密码配置以及连接创建函数，当其他程序需要调用时直接调取文件；数据操作集合，将常用的查询函数封装成统一的函数，根据传递参数、条件的不同进而执行不同的查询，获取结果后统一返回；声明创建模块，需要的集合在程序中进行声明创建，包含声明的各种集合、数据操作集合，调用需要的相应集合。

存储模块202包括如下设置步骤，连接数据库以及封装数据库操作；将需要的创建连接函数、存取函数在组件中实现；设置有效时间的函数；将请求传来的指令输入验证函数；在登录完成后进行调用函数保存到内存数据库，需要时调用；获取请求中的身份信息，以此为钥匙查看内存数据库中是否存在，以便在请求处理之前进行用户是否登录的验证同时重新保存会话。

登录验证模块203包括如下设置步骤，登录验证策略，处理登录的程序调用登录验证策略，查看用户名、密码是否规范合法；注册验证策略，在注册请求处理时，调用注册验证策略，查看用户相关信息是否规范，具体的规则需要根据应用实际情况来决定，合法则继续执行，调用数据库模块201将用户信息存储到数据库中，否则返回错误信息的响应。

通用模块204包括分页和发送邮件的功能；通用模块204由一个总的文件来调用分页和发送邮件的组件，分页组件根据请求传递来的参数来设置数据获取的条件，同时需要调用数据库连接组件，获取需要的部分数据并传回前端；发送邮件组件时调用系统的配置文件，获取发送方的地址和密码，设置邮件相关主题、内容，实现邮件的发送。

测试场景：

本实施例中对于基于Vue简化前后端分离权限控制和传统鉴权控制方式进行鉴权作对比，包括从鉴权方式、消耗服务器资源、并发量的支持以及两种方式的处理延时，将本方案基于Vue简化前后端分离权限控制部署至计算机中，分别通过不同的访问请求并发支持与传统方案对比，其分析后获得如下结果，如下表1的示意：

表1：

同时，分别采用基于Vue简化前后端分离权限控制和传统鉴权控制方式进行鉴权对比测试。其中测试集选用为多种不同对的访问请求，传统鉴权方式此处采用的是基于角色的权限访问控制(RGBC)，由不同的访问请求通过访问本方案鉴权控制方法和传统的鉴权控制方法，对二者过程中的处理延时和流量消耗进行测试，设置了多组不同的实验，其并发量分别为1000、3000、6000和10000，通过测试后不同方式的响应时间结果如下：

参照图5～6的示意，其中图5示意为不同并发量下的处理延时测试结果，由图中不难发现，对于并发量不大的情况下，传统鉴权与本方案的差距不是十分的明显，而随着处理的并发量的逐渐增加，传统鉴权的响应越来越吃力，而本方案不仅明显较传统方案响应时间短，且并发量越大效果越明显。同时图中也不难看出，传统鉴权对于高并发量的响应曲线倾斜率越来越大，即说明传统方案对于高并发的情况处理相对于低并发的处理变化较大，而本方案中曲线走势较缓和，即说明本方案在高并发和低并发的变化中并无较大的变化，具有更加稳定的效果。

本实施例中还对不同并发量下传统基于角色的权限访问控制(RGBC)和本方案提出基于Vue简化前后端分离权限控制进行流量消耗不同的测试，因为本实施例中通过拿到用户权限，然后动态鉴权、前端控制，就是等于把所有权限全部拿到，然后动态生成访问权限，鉴权发生在前端不消耗后端服务器的资源，减轻后端运行的压力；而传统鉴权发生在后端，其中间的流量消耗也具有截然的不同，具体的测试结果参照图6的示意：图中不难看出，传统方式的后端鉴权由于流量传输路径较长的问题，与本方案的鉴权方式在流量的损耗上也有明显的差距，本方案经多组测试，明显较传统方案在进程流量消耗上具有较大的优势，也更加说明本方案能够减少后端运行的大量压力。

实施例2

参照图3的示意，示意为本实施例提出一种基于Vue简化前后端分离权限控制的系统的整体原理结构示意图，上述实施例的方法能够依托于本实施例的系统进行实现。具体的，该系统包括通过网络通信协议连接的前端100和服务器后端200，前端100用于网页端的操作，服务器后端200用于网页后端的服务。

进一步的，前端100框架组件包括路由101、控制器102、指令103、内置http模块104以及整体模块定义配置105，能够对前端页面的控制和绑定，服务器后端200还包括数据库模块201、存储模块202、登录验证模块203以及通用模块204，以上模块均为程序模块，通过代码编辑实现相应的功能。

前后端分离的实现需要前端与后端之间相互配合，前端需要有自己的路由和控制器来负责数据的处理与模板的控制，这样后端框架只需要负责业务逻辑处理和数据存取，而且后端有自己的路由规则以及http模块来对请求进行转发处理，同时还要保证前后端的交互主要通过http请求来存取数据，避免后端干涉前端模板。

应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明技术方案的精神和范围，其均应涵盖在本发明的权利要求范围当中。

Claims (10)

1.一种基于Vue简化前后端分离权限控制的方法，其特征在于：包括以下步骤，

服务器后端(200)提供所有权限列表；

使用Vue作为前端模板引擎；

不同用户由前端(100)登录，输入不同登陆者的身份信息；

所述服务器后端(200)根据不同的所述身份信息判断其拥有的权限并通过接口信息传递；

前端(100)生成动态路由，调用所述接口信息，获取系统登陆者的权限列表，根据权限列表动态生成前端路由表，确定访问者的可访问路由列表；

有权限则跳转成功，否则失败跳转到404页或者提示无访问权限。

2.如权利要求1所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述前端(100)框架组件包括路由(101)、控制器(102)、指令(103)、内置http模块(104)以及整体模块定义配置(105)，能够对前端页面的控制和绑定。

3.如权利要求2所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述控制和所述绑定还包括，

在网页端的配置中实现路由，并在路由渲染页面之前通过的按需加载将页面对应的控制器动态加载进来；控制器负责将数据与页面进行绑定，监听页面中的事件并执行相应操作，通过依赖注入的方式引入内置http模块后可发送请求并对响应回的信息进行处理加工。

4.如权利要求1～3任一所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述前端框架还包括以下搭建步骤，

按需加载，在网页端的配置中实现路由，并在路由渲染页面之前通过的按需加载将页面对应的控制器动态加载进来；

前端分页，包括页面显示和控制器中的逻辑处理部分，构建单独的分页页面和分页组件，所述分页组件负责初始化相关分页参数以及实现分页需要的操作函数；

树形插件，显示众多的存在父子关系的节点数据，并对其进行增删改或选择操作；

页面编辑，包括页面编辑器通过创建相关的页面参数指令进行编辑。

5.如权利要求4所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述服务器后端(200)还包括数据库模块(201)、存储模块(202)、登录验证模块(203)以及通用模块(204)。

6.如权利要求5所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述数据库模块(201)包括如下设置步骤，

数据库连接，包括数据库的地址、端口、用户名、密码配置以及连接创建函数，当其他程序需要调用时直接调取文件；

数据操作集合，将常用的查询函数封装成统一的函数，根据传递参数、条件的不同进而执行不同的查询，获取结果后统一返回；

声明创建模块，需要的集合在程序中进行声明创建，包含声明的各种集合、数据操作集合，调用需要的相应集合。

7.如权利要求5或6所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述存储模块(202)包括如下设置步骤，

连接数据库以及封装数据库操作；

将需要的创建连接函数、存取函数在组件中实现；

设置有效时间的函数；

将请求传来的指令输入验证函数；

在登录完成后进行调用函数保存到内存数据库，需要时调用；

获取请求中的身份信息，以此为钥匙查看内存数据库中是否存在，以便在请求处理之前进行用户是否登录的验证同时重新保存会话。

8.如权利要求7所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述登录验证模块(203)包括如下设置步骤，

登录验证策略，处理登录的程序调用登录验证策略，查看用户名、密码是否规范合法；

注册验证策略，在注册请求处理时，调用注册验证策略，查看用户相关信息是否规范，具体的规则需要根据应用实际情况来决定，合法则继续执行，调用数据库模块(201)将用户信息存储到数据库中，否则返回错误信息的响应。

9.如权利要求8所述的基于Vue简化前后端分离权限控制的方法，其特征在于：所述通用模块(204)包括分页和发送邮件的功能；

所述通用模块(204)由一个总的文件来调用分页和发送邮件的组件，分页组件根据请求传递来的参数来设置数据获取的条件，同时需要调用数据库连接组件，获取需要的部分数据并传回前端；

发送邮件组件时调用系统的配置文件，获取发送方的地址和密码，设置邮件相关主题、内容，实现邮件的发送。

10.一种基于Vue简化前后端分离权限控制的系统，其特征在于：包括通过网络通信协议连接的前端(100)和服务器后端(200)，所述前端(100)用于网页端的操作，所述服务器后端(200)用于网页后端的服务。