CN110750747A

CN110750747A - 一种页面跳转方法、装置、设备及可读存储介质

Info

Publication number: CN110750747A
Application number: CN201911006310.3A
Authority: CN
Inventors: 叶章龙; 范渊
Original assignee: Hangzhou Dbappsecurity Technology Co Ltd
Current assignee: Hangzhou Dbappsecurity Technology Co Ltd
Priority date: 2019-10-22
Filing date: 2019-10-22
Publication date: 2020-02-04
Anticipated expiration: 2039-10-22
Also published as: CN110750747B

Abstract

本申请公开了一种页面跳转方法、装置、设备及可读存储介质。本申请公开的方法应用于客户端，包括：若在用户登录后，接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；判断用户对应的权限信息中是否存在标识信息；若是，则跳转至目的页面；若否，则生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息。本申请在客户端完成了页面跳转，无需将页面跳转请求发送至服务端，降低了客户端和服务端的工作量，提高了跳转效率，其中的权限校验机制提高了客户端安全性。相应地，本申请公开的一种页面跳转装置、设备及可读存储介质，也同样具有上述技术效果。

Description

一种页面跳转方法、装置、设备及可读存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种页面跳转方法、装置、设备及可读存储介质。

背景技术

目前，大多数客户端的页面在跳转时，需要将页面跳转请求发送至相应的服务端，待服务端应答后，才能根据应答执行页面跳转。此种方式不仅增加了客户端和服务端的工作量，还可能带来较长的时延，会降低用户体验。同时，该跳转方式还缺乏权限校验机制，会使项目存在安全风险。

因此，如何提高页面跳转的效率和安全性，是本领域技术人员需要解决的问题。

发明内容

有鉴于此，本申请的目的在于提供一种页面跳转方法、装置、设备及可读存储介质，以提高页面跳转的效率和安全性。其具体方案如下：

第一方面，本申请提供了一种页面跳转方法，应用于客户端，包括：

若在用户登录后，接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；

判断用户对应的权限信息中是否存在标识信息；

若是，则跳转至目的页面；

若否，则生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息。

优选地，判断用户对应的权限信息中是否存在标识信息，包括：

遍历包含权限信息的树形结构图；

若遍历到标识信息，则确定权限信息中存在标识信息，并执行跳转至目的页面的步骤；

若未遍历到标识信息，则确定权限信息中不存在标识信息，并执行生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息的步骤。

优选地，树形结构图的生成过程包括：

从服务端获取用户的权限列表；

根据权限列表确定用户具有访问权限的业务模块，并将业务模块的路由地址确定为业务模块的标识信息；

查询业务模块包括的页面，并将页面的路由地址确定为页面的标识信息；

查询页面包括的组件，并将组件的路由地址确定为组件的标识信息；

将业务模块、页面和组件确定为树形结构图的节点，并将所有标识信息添加至对应的节点，获得树形结构图。

优选地，跳转至目的页面之后，还包括：

根据用户对目的页面的权限确定需要渲染的变量信息；

按照变量信息渲染目的页面，并展示渲染后的目的页面。

优选地，还包括：

若监测到用户的权限列表在服务端发生更新，则根据更新后的权限列表更新树形结构图。

优选地，在用户当前访问的页面展示通知消息之后，还包括：

若接收到用户输入的跳转至鉴权页面的请求，则跳转至鉴权页面，以便用户在鉴权页面进行权限校验。

第二方面，本申请提供了一种页面跳转装置，应用于客户端，包括：

解析模块，用于若在用户登录后，接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；

判断模块，用于判断用户对应的权限信息中是否存在标识信息；

跳转模块，用于若权限信息中存在标识信息，则跳转至目的页面；

提示模块，用于若权限信息中不存在标识信息，则生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息。

优选地，客户端基于MVVM和Vue实现。

第三方面，本申请提供了一种页面跳转设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行计算机程序，以实现前述公开的页面跳转方法。

第四方面，本申请提供了一种可读存储介质，用于保存计算机程序，其中，计算机程序被处理器执行时实现前述公开的页面跳转方法。

通过以上方案可知，本申请提供了一种页面跳转方法，应用于客户端，包括：若在用户登录后，接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；判断用户对应的权限信息中是否存在标识信息；若是，则跳转至目的页面；若否，则生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息。

可见，该方法在用户登录后，若接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；若该标识信息存在于用户对应的权限信息中，则表明用户对目的页面具有访问权限，那么跳转至目的页面；否则，表明用户对目的页面没有访问权限，那么生成用户无权限的通知消息，然后在用户当前访问的页面展示通知消息。其中，本申请基于客户端实现，也就是在客户端就可以完成页面跳转，无需将页面跳转请求发送至服务端，这样可以降低客户端和服务端的工作量，提高跳转效率，从而可降低跳转时延，提高用户体验。同时，本申请提供的跳转方式加入了权限校验机制，可提高客户端安全性。

相应地，本申请提供的一种页面跳转装置、设备及可读存储介质，也同样具有上述技术效果。

附图说明

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

图1为本申请公开的一种页面跳转方法流程图；

图2为本申请公开的一种树形结构图的生成方法流程图；

图3为本申请公开的一种树形结构图；

图4为本申请公开的一种客户端示意图；

图5为本申请公开的另一种页面跳转方法流程图；

图6为本申请公开的一种页面跳转装置示意图；

图7为本申请公开的一种页面跳转设备示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

目前，大多数客户端的页面在跳转时，需要将页面跳转请求发送至相应的服务端，待服务端应答后，才能根据应答执行页面跳转。此种方式不仅增加了客户端和服务端的工作量，还可能带来较长的时延，会降低用户体验。同时，该跳转方式还缺乏权限校验机制，会使项目存在安全风险。为此，本申请提供了一种页面跳转方案，能够提高页面跳转的效率和安全性。

参见图1所示，本申请实施例公开了一种页面跳转方法，应用于客户端，包括：

S101、若在用户登录后，接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；

S102、判断用户对应的权限信息中是否存在标识信息；若是，则执行S103；若否，则执行S104；

S103、跳转至目的页面；

S104、生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息。

在一种具体实施方式中，判断用户对应的权限信息中是否存在标识信息，包括：遍历包含权限信息的树形结构图；若遍历到标识信息，则确定权限信息中存在标识信息，并执行跳转至目的页面的步骤；若未遍历到标识信息，则确定权限信息中不存在标识信息，并执行生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息的步骤。

在一种具体实施方式中，跳转至目的页面之后，还包括：根据用户对目的页面的权限确定需要渲染的变量信息；按照变量信息渲染目的页面，并展示渲染后的目的页面。

需要说明的是，用户对一个页面具有访问权限时，该访问权限可以是对该页面展示的所有内容的访问权限，也可以是对该页面展示的部分内容的访问权限。为了进行区别，本实施例将一个页面对应的dom树中的节点信息设置为变量信息，当用户对该变量信息控制的内容具有访问权限时，则将该变量信息与当前用户绑定，那么当用户访问此页面时，仅展示与用户有绑定关系的变量信息控制的内容，从而区分不同用户对同一个页面的不同访问权限。一个页面对应的dom树中的所有节点信息对应当前页面中的所有内容。

在本实施例中，为了及时更新客户端保存的用户的权限信息，可以设置定时器。利用该定时器定时去服务端查询用户的权限列表，若监测到用户的权限列表在服务端发生更新，则根据更新后的权限列表更新树形结构图，从而使同一用户的权限在客户端和服务器是同步的。

在一种具体实施方式中，在用户当前访问的页面展示通知消息之后，还包括：若接收到用户输入的跳转至鉴权页面的请求，则跳转至鉴权页面，以便用户在鉴权页面进行权限校验。也就是说，当用户对目的页面没有访问权限时，可以利用鉴权页面对当前用户进行权限校验，具体的权限校验可以为：让用户再次输入用户名和密码，以区分正常用户和非正常用户，非正常用户可以为爬虫操作的访问，或者恶意攻击等；若目的页面的访问以同意服务条款为前提，那么让用户同意相应的服务条款；亦或者其他校验方式。

可见，本申请实施例公开了一种页面跳转方法，该方法基于客户端实现，也就是在客户端就可以完成页面跳转，无需将页面跳转请求发送至服务端，这样可以降低客户端和服务端的工作量，提高跳转效率，从而可降低跳转时延，提高用户体验。同时，本申请提供的跳转方式加入了权限校验机制，可提高客户端安全性。

参见图2所示，本申请实施例公开了一种树形结构图的生成方法，树形结构图用于存储用户的权限信息，每个用户对应一个树形结构图，树形结构图的生成包括：

S201、从服务端获取用户的权限列表；

S202、根据权限列表确定用户具有访问权限的业务模块，并将业务模块的路由地址确定为业务模块的标识信息；

S203、查询业务模块包括的页面，并将页面的路由地址确定为页面的标识信息；

S204、查询页面包括的组件，并将组件的路由地址确定为组件的标识信息；

S205、将业务模块、页面和组件确定为树形结构图的节点，并将所有标识信息添加至对应的节点，获得树形结构图。

需要说明的是，客户端中包括多个业务模块，而一个用户可能对一个或多个业务模块有访问权限。一个业务模块包括一个或多个页面，一个页面可包括一个组件。

按照本实施例提供的树形结构图生成方法，可生成如图3所示的结构图。图3表示某一个用户对应的树形结构图。在图3中，“value”表示业务模块或页面或组件的标识信息，“children”表示子节点。其中，业务模块的子节点为页面，页面的子节点为组件。

其中，客户端的结构图可请见图4。在图4中，页面路由注册模块用于为业务模块或页面或组件注册路由地址，API通信模块用于与服务端进行通信。具体的，页面路由注册模块每一个页面进行路由地址注册时，定义name字段作为唯一标识，name字段即为图3中的“value”，“value”可以为路由地址，可以为自定义的字段。API通信模块中定义有一个接口，该接口用来与服务端同步用户权限信息。

由上可见，本实施例提供了一种树形结构图的生成方法，按照该方法生成的树形结构图按照业务模块、页面和组件的原有所属关系排列，结构清晰且不会有遗漏。遍历该树形结构图时，可采用任意遍历算法。

参见图5所示，本申请实施例公开了另一种页面跳转方法，包括：

S501、用户登录后，创建user对象；

S502、AJAX从服务端获取用户权限数据；

S503、主函数添加全局事件监听；

S504、当接收到页面跳转请求，进行页面权限校验；

S505、校验通过后，跳转页面。

其中，当接收到页面跳转请求，进行页面权限校验具体包括：查询user对象中是否有目的页面的标识信息；若是，则加载页面组件，并完成页面渲染和展示。

本实施例提供的页面跳转方法的具体过程包括：在vuex状态管理创建user对象，user对象用于存储用户信息，user对象中有如图3所示的树形结构图；用Axios来实现AJAX异步请求，获取服务端存储的用户的权限数据；利用main.js主函数添加全局事件监听，并通过router.beforeEach方法监听全局页面跳转前权限校验，在router.beforeEach方法中定义校验规则。校验规则具体为：当进入任意页面都将触发权限校验，遍历如图3所示的树形结构图，若其中存在当前目的页面的标识信息，则跳转页面；否则，跳转至鉴权页面，鉴权页面可实现权限再配置。vuex是专为vue应用程序开发的状态管理模式。

需要说明的是，本实施例不会将重要的参数信息带到地址栏中，可降低地址栏被修改的风险；跳转页面中权限的校验实现了对跳转前后的页面地址的有效监控，不会出现白屏或对用户不友好的页面展示。

由上可见，本实施例公开了一种页面跳转方法，该方法基于客户端实现，也就是在客户端就可以完成页面跳转，无需将页面跳转请求发送至服务端，这样可以降低客户端和服务端的工作量，提高跳转效率，从而可降低跳转时延，提高用户体验。同时，本申请提供的跳转方式加入了权限校验机制，可提高客户端安全性。

下面对本申请实施例提供的一种页面跳转装置进行介绍，下文描述的一种页面跳转装置与上文描述的一种页面跳转方法可以相互参照。

参见图6所示，本申请实施例公开了一种页面跳转装置，应用于客户端，包括：

解析模块601，用于若在用户登录后，接收到用户输入的跳转至目的页面的请求，则从请求中解析出目的页面的标识信息；

判断模块602，用于判断用户对应的权限信息中是否存在标识信息；

跳转模块603，用于若权限信息中存在标识信息，则跳转至目的页面；

提示模块604，用于若权限信息中不存在标识信息，则生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息。

在一种具体实施方式中，判断模块包括：

遍历单元，用于遍历包含权限信息的树形结构图；

第一确定单元，用于若遍历到标识信息，则确定权限信息中存在标识信息，并执行跳转至目的页面的步骤；

第二确定单元，用于若未遍历到标识信息，则确定权限信息中不存在标识信息，并执行生成用户无权限的通知消息，并在用户当前访问的页面展示通知消息的步骤。

在一种具体实施方式中，还包括用于生成树形结构图的生成模块，该生成模块包括：

获取单元，用于从服务端获取用户的权限列表；

第一执行单元，用于根据权限列表确定用户具有访问权限的业务模块，并将业务模块的路由地址确定为业务模块的标识信息；

第二执行单元，用于查询业务模块包括的页面，并将页面的路由地址确定为页面的标识信息；

第三执行单元，用于查询页面包括的组件，并将组件的路由地址确定为组件的标识信息；

第四执行单元，用于将业务模块、页面和组件确定为树形结构图的节点，并将所有标识信息添加至对应的节点，获得树形结构图。

在一种具体实施方式中，还包括：

第三确定单元，用于根据用户对目的页面的权限确定需要渲染的变量信息；

渲染单元，用于按照变量信息渲染目的页面，并展示渲染后的目的页面。

在一种具体实施方式中，还包括：

更新模块，用于若监测到用户的权限列表在服务端发生更新，则根据更新后的权限列表更新树形结构图。

在一种具体实施方式中，还包括：

鉴权模块，用于若接收到用户输入的跳转至鉴权页面的请求，则跳转至鉴权页面，以便用户在鉴权页面进行权限校验。

在一种具体实施方式中，客户端基于MVVM(Model-View-ViewModel)和Vue实现。其中，可利用vue-cli搭建框架，vue-cli是应用于vue的官方工具。

需要说明的是，MVVM框架可以使前端开发者只用关注数据，使用数据的变化改变DOM，也就是视图的变化，MVVM通过数据的双向绑定，当数据发生变化时，局部界面自动重新渲染，解耦View层，也就是视图层。

MVVM框架包括Model Model层、View视图层和View Model。

Model Model层，也就是数据层，用于逻辑处理以及数据的处理。这一层，前端开发者无需关注后端的数据的处理，只需要后端暴露接口，通过后端返回的数据格式，前端开发人员进行相应的数据处理。View视图层，用于展示用户界面，不负责数据的处理，用于数据绑定的声明，指令的声明，事件绑定的声明。View Model负责Model Model层与View层的交互，是其中最重要的一环，将Model Model层的数据进行监听，当数据发生改变时，及时更新视图。这一层由框架封装完成，网站开发人员只需关注Model中数据的处理，实现数据驱动视图。

可见，MVVM的优点为：低耦合，其中View层与Model层相互联系，又可以相互独立，数据可以双向绑定又可以单向传递。组件化：模块化的应用，出现组件的重复利用，同样的视图模板，开发人员可以重复利用，提高开发效率，后期更容易维护。易于开发：由于数据据驱动视图，开发人员更多的重心放在数据的处理与业务逻辑，极大地提高开发效率。因此，基于MVVM和Vue实现的客户端，与服务端代码的耦合度低，易于维护。Vue是基于MVVM诞生的一种前端开发框架。

其中，关于本实施例中各个模块、单元更加具体的工作过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。

可见，本实施例提供了一种页面跳转装置，该装置设置于客户端，也就是在客户端就可以完成页面跳转，无需将页面跳转请求发送至服务端，这样可以降低客户端和服务端的工作量，提高跳转效率，从而可降低跳转时延，提高用户体验。同时，本申请提供的跳转方式加入了权限校验机制，可提高客户端安全性。

下面对本申请实施例提供的一种页面跳转设备进行介绍，下文描述的一种页面跳转设备与上文描述的一种页面跳转方法及装置可以相互参照。

参见图7所示，本申请实施例公开了一种页面跳转设备，包括：

存储器701，用于保存计算机程序；

处理器702，用于执行所述计算机程序，以实现上述任意实施例公开的方法。

下面对本申请实施例提供的一种可读存储介质进行介绍，下文描述的一种可读存储介质与上文描述的一种页面跳转方法、装置及设备可以相互参照。

一种可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现前述实施例公开的页面跳转方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。

本申请涉及的“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法或设备固有的其它步骤或单元。

需要说明的是，在本申请中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的可读存储介质中。

本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

1.一种页面跳转方法，其特征在于，应用于客户端，包括：

若在用户登录后，接收到所述用户输入的跳转至目的页面的请求，则从所述请求中解析出所述目的页面的标识信息；

判断所述用户对应的权限信息中是否存在所述标识信息；

若是，则跳转至所述目的页面；

若否，则生成用户无权限的通知消息，并在所述用户当前访问的页面展示所述通知消息。

2.根据权利要求1所述的页面跳转方法，其特征在于，所述判断所述用户对应的权限信息中是否存在所述标识信息，包括：

遍历包含所述权限信息的树形结构图；

若遍历到所述标识信息，则确定所述权限信息中存在所述标识信息，并执行所述跳转至所述目的页面的步骤；

若未遍历到所述标识信息，则确定所述权限信息中不存在所述标识信息，并执行所述生成用户无权限的通知消息，并在所述用户当前访问的页面展示所述通知消息的步骤。

3.根据权利要求2所述的页面跳转方法，其特征在于，所述树形结构图的生成过程包括：

从服务端获取所述用户的权限列表；

根据所述权限列表确定所述用户具有访问权限的业务模块，并将所述业务模块的路由地址确定为所述业务模块的标识信息；

查询所述业务模块包括的页面，并将所述页面的路由地址确定为所述页面的标识信息；

查询所述页面包括的组件，并将所述组件的路由地址确定为所述组件的标识信息；

将所述业务模块、所述页面和所述组件确定为所述树形结构图的节点，并将所有标识信息添加至对应的节点，获得所述树形结构图。

4.根据权利要求3所述的页面跳转方法，其特征在于，所述跳转至所述目的页面之后，还包括：

根据所述用户对所述目的页面的权限确定需要渲染的变量信息；

按照所述变量信息渲染所述目的页面，并展示渲染后的所述目的页面。

5.根据权利要求2所述的页面跳转方法，其特征在于，还包括：

若监测到所述用户的权限列表在服务端发生更新，则根据更新后的权限列表更新所述树形结构图。

6.根据权利要求1至5任一项所述的页面跳转方法，其特征在于，所述在所述用户当前访问的页面展示所述通知消息之后，还包括：

若接收到用户输入的跳转至鉴权页面的请求，则跳转至所述鉴权页面，以便所述用户在所述鉴权页面进行权限校验。

7.一种页面跳转装置，其特征在于，应用于客户端，包括：

解析模块，用于若在用户登录后，接收到所述用户输入的跳转至目的页面的请求，则从所述请求中解析出所述目的页面的标识信息；

判断模块，用于判断所述用户对应的权限信息中是否存在所述标识信息；

跳转模块，用于若所述权限信息中存在所述标识信息，则跳转至所述目的页面；

提示模块，用于若所述权限信息中不存在所述标识信息，则生成用户无权限的通知消息，并在所述用户当前访问的页面展示所述通知消息。

8.根据权利要求7所述的页面跳转装置，其特征在于，所述客户端基于MVVM和Vue实现。

9.一种页面跳转设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序，以实现如权利要求1至6任一项所述的页面跳转方法。

10.一种可读存储介质，其特征在于，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的页面跳转方法。