前端权限控制方法、装置、电子设备及存储介质

技术领域

本发明涉及软件技术领域，更具体地说，涉及一种前端权限控制方法、装置、电子设备及存储介质。

背景技术

对于前后端分离的系统，如何安全有效地进行权限控制，是项目过程中避免不了的问题点。

一般来说，权限管理可以分为两种情况：第一种为页面访问权限，非常常见，即根据不同角色的用户展现不同的页面；第二种为数据库操作权限，即根据用户权限开放对数据库的增删改查的操作。这两种情况在前端的实际表现是一致的，但是对于第一种情况，只有视觉隔离，而真正的控制是放在后端，也就是第二种情况。

因此，如何降低后端服务的访问压力，是亟需解决的问题。

发明内容

有鉴于此，为解决上述问题，本发明提供一种前端权限控制方法、装置、电子设备及存储介质，技术方案如下：

本发明一方面提供一种前端权限控制方法，所述方法应用于前端，所述方法包括：

接收登录页面被输入的目标对象的登录信息；

将所述登录信息发送至后端，以使所述后端根据所述登录信息返回所述目标对象的权限信息；

生成与所述权限信息相对应的访问页面，并基于所述访问页面对所述目标对象的访问操作进行权限控制。

可选的，所述权限信息包括权限树，所述权限树由多个具有层级关系的菜单组成，第一菜单为第二菜单的上层菜单，第一菜单的级别高于第二菜单，级别最低的菜单中包含多个按钮；

相应的，所述生成与所述权限信息相对应的访问页面，包括：

根据所述权限树中菜单的层级关系和相应的按钮生成相应的路由页面。

可选的，所述根据所述权限树中菜单的层级关系和相应的按钮生成相应的路由页面，包括：

调取预先生成的角色菜单表，所述角色菜单表中记录有不同角色对应的具有访问权限的菜单；

获取所述目标对象所属的目标角色，并以所述目标角色在所述角色菜单表中对应的菜单，对所述权限树中的菜单进行递归比对；

基于递归比对结果生成与所述权限树中菜单的层级关系相匹配的动态路由，以输出具有所述动态路由的路由页面。

可选的，所述后端返回所述权限信息的同时，返回所述目标对象的令牌；

相应的，所述基于所述访问页面对所述目标对象的访问操作进行权限控制，包括：

接收所述访问页面被输入的所述目标对象的访问请求，所述访问请求包括待验证的令牌和访问链接；

调取已缓存的所述目标对象的令牌，以验证所述访问请求中的令牌；

若所述访问请求中的令牌验证通过，则调取已缓存的所述权限树中按钮对应的访问链接，以验证所述访问请求中的访问链接；

若所述访问请求中的访问链接验证通过，则将所述访问请求中的访问链接发送至所述后端。

本发明另一方面提供一种前端权限控制装置，所述装置包括：

登录模块，用于接收登录页面被输入的目标对象的登录信息；将所述登录信息发送至后端，以使所述后端根据所述登录信息返回所述目标对象的权限信息；

权限控制模块，用于生成与所述权限信息相对应的访问页面，并基于所述访问页面对所述目标对象的访问操作进行权限控制。

可选的，所述权限信息包括权限树，所述权限树由多个具有层级关系的菜单组成，第一菜单为第二菜单的上层菜单，第一菜单的级别高于第二菜单，级别最低的菜单中包含多个按钮；

相应的，用于生成与所述权限信息相对应的访问页面的所述权限控制模块，具体用于：

根据所述权限树中菜单的层级关系和相应的按钮生成相应的路由页面。

可选的，用于根据所述权限树中菜单的层级关系和相应的按钮生成相应的路由页面的所述权限控制模块，具体用于：

调取预先生成的角色菜单表，所述角色菜单表中记录有不同角色对应的具有访问权限的菜单；获取所述目标对象所属的目标角色，并以所述目标角色在所述角色菜单表中对应的菜单，对所述权限树中的菜单进行递归比对；基于递归比对结果生成与所述权限树中菜单的层级关系相匹配的动态路由，以输出具有所述动态路由的路由页面。

可选的，所述后端返回所述权限信息的同时，返回所述目标对象的令牌；

相应的，用于基于所述访问页面对所述目标对象的访问操作进行权限控制的所述权限控制模块，具体用于：

接收所述访问页面被输入的所述目标对象的访问请求，所述访问请求包括待验证的令牌和访问链接；调取已缓存的所述目标对象的令牌，以验证所述访问请求中的令牌；若所述访问请求中的令牌验证通过，则调取已缓存的所述权限树中按钮对应的访问链接，以验证所述访问请求中的访问链接；若所述访问请求中的访问链接验证通过，则将所述访问请求中的访问链接发送至所述后端。

本发明另一方面提供一种电子设备，所述电子设备包括：至少一个存储器和至少一个处理器；所述存储器存储有程序，所述处理器调用所述存储器存储的程序，所述程序用于实现任意一项所述的前端权限控制方法。

本发明另一方面提供一种存储介质，所述存储介质中存储有计算机可执行指令，所述计算机可执行指令用于执行任意一项所述的前端权限控制方法。

相较于现有技术，本发明实现的有益效果为：

本发明提供一种前端权限控制方法、装置、电子设备及存储介质，前端将目标对象在登录页面所输入的登录信息发送至后端，由后端返回目标对象的权限信息，前端则生成与该权限信息相对应的访问页面，由前端基于该访问页面对目标对象的访问操作进行权限控制。基于本发明，可以解决前端权限控制的问题，在用户登录后，能够在不访问后端服务的情况下，由前端识别访问操作合法性，从而减轻后端的访问压力。

附图说明

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

图1为本发明实施例提供的前端权限控制方法的方法流程图；

图2为本发明实施例提供的前端权限控制方法的部分方法流程图；

图3为本发明实施例提供的前端权限控制方法的另一部分方法流程图；

图4为本发明实施例提供的前端权限控制装置的结构示意图。

具体实施方式

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

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

现阶段，主流的vue的权限控制策略主要有如下两种：

1)前端记录所有的权限。用户登录后，后端返回用户角色，前端根据角色自行分配页面。

2)前端仅记录页面，后端记录权限。用户登录后，后端返回用户权限列表，前端根据该列表生成可访问页面。

现有的权限控制或是前端记录所有权限，当角色越来越多时，给前端路由的编写带来一定的麻烦，或是完全依赖后端进行权限控制，若在用户量很大的情况下，增加了服务器的负担。

本发明提出的基于BFE框架的权限控制方法，在BFE框架下解决前端权限控制的问题，整合上述两种权限控制策略，权限完全基于后端设置，几乎没有维护成本，同时可以根据URL(Uniform Resource Locator，统一资源定位符)链接在前端判断是否合法，不需要将请求发至后端再进行判断。这样，既降低了维护成本，又可以从前端拦截非法URL链接，降低后端服务的压力。

需要说明的是，BFE是基于vue.js的新型前端框架，旨在降低前端开发人员的学习成本、提升前端的开发效率。

参见图1所示的方法流程图，本发明实施例提供一种前端权限控制方法，该方法应用于前端，该方法包括如下步骤：

S10，接收登录页面被输入的目标对象的登录信息。

本发明实施例中，前端响应目标对象的输入操作，向目标对象展示登录页面，进而获得目标对象向登录页面所输入的登录信息，该登录信息可以包含目标对象的账号、密码和验证码等信息，本发明实施例对此不做限定。

S20，将登录信息发送至后端，以使后端根据登录信息返回目标对象的权限信息。

本发明实施例中，后端可以解析登录信息，以识别目标对象的角色，从而确定与该角色相匹配的权限信息返回给前端。

具体的，本发明中可以根据需求设计角色表、菜单表和角色菜单表，表中的内容可以由系统管理者进行维护，包括新增和管理。其中，

角色表中记录有不同角色的信息，包括角色名称、编号等；菜单表中记录有所有权限的信息，包括标识、属性等，权限可以分为菜单和按钮两类，一个按钮对应一个URL链接；角色菜单表即对角色表中的角色和菜单表中的菜单进行关联。需要说明的是，菜单具有指向性，即一个菜单可以指向另一个菜单，还可以指向一个或多个按钮。

基于此，后端向前端所返回的权限信息中包含至少一个菜单、以及各菜单所指向的菜单/按钮。

S30，生成与权限信息相对应的访问页面，并基于访问页面对目标对象的访问操作进行权限控制。

本发明实施例中，基于后端所返回的权限信息，对其中的菜单和按钮展示于访问页面上，也就是说，目标对象所查看到的访问页面上的内容都是其角色所具有的权限。因此，目标对象操作访问页面上的菜单，可以查看该菜单所指向的菜单/按钮。前端响应目标对象针对目标按钮的触控操作，即可生成该目标按钮所对应的URL链接，由于目标按钮展示于访问页面上，其属于目标对象所具有的权限，因此前端可以直接将该URL链接发送至后端，以使目标对象访问相关的服务。

具体实现过程中，权限信息包括权限树，该权限树由多个具有层级关系的菜单组成，第一菜单为第二菜单的上层菜单，第一菜单的级别高于第二菜单，级别最低的菜单中包含多个按钮。

本发明实施例中，由于菜单具有指向性，即一个菜单可以指向菜单或者按钮。举例来说，权限信息中包含三个菜单——菜单1、菜单2和菜单3，菜单1指向按钮1、2、3，菜单2指向菜单3、菜单3指向按钮4、5，因此权限信息中包含两个权限树，即菜单1与按钮1、2、3所组成的权限树1、以及菜单2、菜单3和按钮4、5所组成的权限树2。

继续以权限树2来说，该权限树2中的菜单2和菜单3具有层级关系，即菜单2是菜单3的上层菜单，菜单2的级别高于菜单3，菜单3属于权限树2中级别最低的菜单，菜单3具有按钮4、5。

在此基础上，生成与权限信息相对应的访问页面的过程中，可以按照权限树中菜单的层级关系、以及该权限树中级别最低的菜单所具有的按钮来生成相应的路由页面，该路由页面中能够体现菜单和按钮的路由关系。继续以权限树2来说，基于权限树2所生成的路由页面中，首先向目标对象展示菜单2，在检测到目标对象点击菜单2后，继续向目标对象展示菜单3，进一步在检测到目标对象点击菜单3后，向目标对象显示按钮4、5。

具体实现过程中，前端根据权限树中菜单的层级关系和相应的按钮生成相应的路由页面的过程，可以采用如下步骤，方法流程图如图2所示：

S3011，调取预先生成的角色菜单表，角色菜单表中记录有不同角色对应的具有访问权限的菜单。

S3012，获取目标对象所属的目标角色，并以目标角色在角色菜单表中对应的菜单，对权限树中的菜单进行递归比对。

本发明实施例中，由于前端和后端所处理信息的类型并不相同，因此前端在获得后端所返回的权限树，无法直接使用该权限树，需要对该权限树进行转换，以转换为能够处理的信息类型。

进而，通过将权限树与角色菜单表进行递归对比，筛选出目标对象具有权限的菜单和按钮，以此生成目标对象的动态路由。

S3013，基于递归比对结果生成与权限树中菜单的层级关系相匹配的动态路由，以输出具有动态路由的路由页面。

本发明实施例中，继续以权限树2来说，其相匹配的动态路由即“菜单2→菜单3→按钮4、5”，基于该动态路由响应目标对象的触控操作展示路由页面，最后将针对目标按钮的URL链接发送至后端。

在其他一些实施例中，后端向前端返回权限信息的同时，还向前端返回目标对象的令牌。当然，该令牌也是基于目标对象的登录信息所生成的，具体可以采用现有的算法，比如哈希算法来计算，一个登录信息唯一对应一个令牌。

基于此，步骤S30中“基于访问页面对目标对象的访问操作进行权限控制”可以采用如下步骤，方法流程图如图3所示：

S3021，接收访问页面被输入的目标对象的访问请求，访问请求包括待验证的令牌和访问链接。

为访问非法网络入侵，本发明实施例中，即便目标对象针对的是访问页面中的按钮进行触控操作，也需要对所产生的URL链接进行合法性的验证。当然，同时验证的还有目标对象的令牌。

需要说明的是，对于后端所返回的令牌和权限树中按钮对应的URL链接，前端都可以存放于浏览器缓存中，以实现后续针对令牌和URL链接合法性的验证。

S3022，调取已缓存的目标对象的令牌，以验证访问请求中的令牌。

本发明实施例中，通过对比已缓存的令牌与访问请求中的令牌是否相同，来确定访问请求中令牌的合法性。具体的，如果相同，则访问请求中的令牌合法，验证通过，反之，如果不同，则访问请求中的令牌不合法，验证不通过。

S3023，若访问请求中的令牌验证通过，则调取已缓存的权限树中按钮对应的访问链接，以验证访问请求中的访问链接。

S3024，若访问请求中的访问链接验证通过，则将访问请求中的访问链接发送至后端。

本发明实施例中，访问链接即上述URL链接。本发明依次对令牌和URL链接进行验证，只有两者均验证通过时，才将URL链接发送至后端。由此，即可由前端快速识别非法访问，非法访问的URL链接也不会请求到后端，这就可以减轻后端服务器压力，在一定程度上防止非法用户恶意请求或者用户误操作等情况导致服务瘫痪。

实际应用中，为实现按钮的前端控制，在directives/permission.js文件中增加判断按钮权限的指令，该指令用于需要根据用户角色显示或隐藏的按钮上，具体逻辑如下：

在需要判断权限的按钮上用法：

开支计划

需要说明的是：本发明的实现必须使用以vue.js为基础的BFE框架或相似框架，并且，必须使用数据库对生成权限树的角色菜单表进行配置存储。即，使用BFE作为前端框架进行路由配置和调优，在降低权限维护成本的同时，能够降低后端服务访问的压力。

本发明实施例提供的前端权限控制方法，前端将目标对象在登录页面所输入的登录信息发送至后端，由后端返回目标对象的权限信息，前端则生成与该权限信息相对应的访问页面，由前端基于该访问页面对目标对象的访问操作进行权限控制。基于本发明，可以解决前端权限控制的问题，在用户登录后，能够在不访问后端服务的情况下，由前端识别访问操作合法性，从而减轻后端的访问压力。

基于上述实施例提供的前端权限控制方法，本发明实施例还提供一种执行上述前端权限控制方法的装置，该装置的结构示意图如图4所示，包括：

登录模块10，用于接收登录页面被输入的目标对象的登录信息；将登录信息发送至后端，以使后端根据登录信息返回目标对象的权限信息；

权限控制模块20，用于生成与权限信息相对应的访问页面，并基于访问页面对目标对象的访问操作进行权限控制。

可选的，权限信息包括权限树，权限树由多个具有层级关系的菜单组成，第一菜单为第二菜单的上层菜单，第一菜单的级别高于第二菜单，级别最低的菜单中包含多个按钮；

相应的，用于生成与权限信息相对应的访问页面的权限控制模块20，具体用于：

根据权限树中菜单的层级关系和相应的按钮生成相应的路由页面。

可选的，用于根据权限树中菜单的层级关系和相应的按钮生成相应的路由页面的权限控制模块20，具体用于：

调取预先生成的角色菜单表，角色菜单表中记录有不同角色对应的具有访问权限的菜单；获取目标对象所属的目标角色，并以目标角色在角色菜单表中对应的菜单，对权限树中的菜单进行递归比对；基于递归比对结果生成与权限树中菜单的层级关系相匹配的动态路由，以输出具有动态路由的路由页面。

可选的，后端返回权限信息的同时，返回目标对象的令牌；

相应的，用于基于访问页面对目标对象的访问操作进行权限控制的权限控制模块20，具体用于：

接收访问页面被输入的目标对象的访问请求，访问请求包括待验证的令牌和访问链接；调取已缓存的目标对象的令牌，以验证访问请求中的令牌；若访问请求中的令牌验证通过，则调取已缓存的权限树中按钮对应的访问链接，以验证访问请求中的访问链接；若访问请求中的访问链接验证通过，则将访问请求中的访问链接发送至后端。

需要说明的是，本发明实施例中各模块的细化功能可以参见上述前端权限控制方法实施例的对应公开部分，在此不再赘述。

基于上述实施例提供的前端权限控制方法，本发明实施例还提供一种电子设备，该电子设备包括：至少一个存储器和至少一个处理器；存储器存储有程序，处理器调用存储器存储的程序，程序用于实现前端权限控制方法。

基于上述实施例提供的前端权限控制方法，本发明实施例还提供一种存储介质，该存储介质中存储有计算机可执行指令，计算机可执行指令用于执行前端权限控制方法。

以上对本发明所提供的一种前端权限控制方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备所固有的要素，或者是还包括为这些过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。