CN111181941A

CN111181941A - 一种页面登录方法、系统及相关装置

Info

Publication number: CN111181941A
Application number: CN201911337764.9A
Authority: CN
Inventors: 付锐; 范渊
Original assignee: DBAPPSecurity Co Ltd
Current assignee: DBAPPSecurity Co Ltd
Priority date: 2019-12-23
Filing date: 2019-12-23
Publication date: 2020-05-19
Anticipated expiration: 2039-12-23
Also published as: CN111181941B

Abstract

本申请提供一种页面登录方法，包括：接收后端返回的token；将token保存至本地存储，同时将token添加至头部信息；当接收到用户的操作指令时，将包含头部信息的操作指令发送至后端；根据后端返回的用户信息获取用户页面权限信息并至路由权限表；当用户发起页面更新请求时，根据路由权限表判断页面更新请求是否有效；若是，通过页面更新请求并展示页面更新请求对应的目标页面。本申请实现了页面级别的权限管理，确保控制非授权访问，有效拦截越权访问，提高了网络安全防护能力。使得用户页面权限的管理更具有时效性。本申请还提供一种页面登录系统、计算机可读存储介质和用户登录设备，具有上述有益效果。

Description

一种页面登录方法、系统及相关装置

技术领域

本申请涉及网络安全领域，特别涉及一种页面登录方法、系统及相关装置。

背景技术

以前的权限控制系统是后端根据用户的权限动态生成的，若后期系统增加了模块或者调整子页面后端配置路由和权限，好不容易前后端分离，又回到了前端被后台支配的状态中，并且后期维护成本高。

现有技术中主要是采用在登录成功后和刷新页面时前端发送请求去获取用户权限信息，所以当管理员修改用户权限信息之后不能立刻生效，需要在用户下次登录时，才可重新获取路由信息，难以实现针对不同用户页面权限的修改，不利于网络信息安全维护。

发明内容

本申请的目的是提供一种页面登录方法、系统、计算机可读存储介质和用户登录设备，能够针对用户进行页面权限管理。

为解决上述技术问题，本申请提供一种页面登录方法，具体技术方案如下：

接收后端返回的token；其中，所述token为后端验证用户登录指令成功后发出；

将所述token保存至本地存储，同时将所述token添加至头部信息；

当接收到用户的操作指令时，将包含所述头部信息的所述操作指令发送至所述后端，以使所述后端验证所述token是否在有效时长内，并在所述token有效时刷新所述token的有效时长，并返回用户信息和对应的路由权限表；

根据所述用户信息从所述后端获取用户页面权限信息，并将所述用户页面权限信息添加至所述路由权限表；

当用户发起页面更新请求时，根据所述路由权限表判断所述页面更新请求是否有效；其中，所述操作指令包括所述页面更新请求；

若是，登录所述页面更新请求对应的目标页面。

其中，接收后端返回的token之前，还包括：

接收用户登录请求并发送至后端，以使所述后端根据所述用户登录请求生成实际验证码和所述实际验证码对应的临时token；

接收所述用户登录指令；所述用户登录指令包括用户名、密码和登录验证码；

对所述用户名、所述密码和所述登录验证码分别进行格式验证；

若格式验证均通过，向所述后端发送实际登录请求，以使所述后端利用所述临时token获取所述实际验证码并对所述登录验证码验证；

若所述实际验证码与所述登录验证码不同，则生成验证码无效的提示；

若所述实际验证码与所述登录验证码相同，则验证所述用户名和所述密码是否正确；

若所述用户名和所述密码正确，通过所述实际登录请求，执行接收后端返回的token的步骤；

若所述用户名和所述密码不正确，拒绝所述实际登录请求。

其中，还包括：

将所述路由权限表以树形结构展示，生成可视化页面。

其中，还包括：

将所述用户信息分别保存至所述本地存储和VueX中；

以便在所述可视化页面变更用户的页面登录权限时，利用前端接口从所述本地存储中调取所述用户信息；

同时以便在生成所述目标页面时，从所述VueX中调取所述用户信息。

其中，若所述后端验证所述token超过有效时长，还包括：

接收所述后端返回的用户登录超时指令，强制退出当前页面并显示登录页面。

其中，若根据所述路由权限表判断所述页面更新请求无效，还包括：

刷新当前页面并跳转至无权限页面。

本申请还提供一种页面登录系统，包括：

接收模块，用于接收后端返回的token；其中，所述token为后端验证用户登录指令成功后发出；

存储模块，用于将所述token保存至本地存储，同时将所述token添加至头部信息；

验证模块，用于接收到用户的操作指令时，将包含所述头部信息的所述操作指令发送至所述后端，以使所述后端验证所述token是否在有效时长内，并在所述token有效时刷新所述token的有效时长，并返回用户信息和对应的路由权限表；

页面登录模块，用于根据所述用户信息从所述后端获取用户页面权限信息，并将所述用户页面权限信息添加至所述路由权限表；

判断模块，用于用户发起页面更新请求时，根据所述路由权限表判断所述页面更新请求是否有效；其中，所述操作指令包括所述页面更新请求；

页面展示模块，用于所述判断模块判断结果为是时，登录所述页面更新请求对应的目标页面。

其中，还包括：

无页面登录模块，用于所述判断模块判断结果为否时，刷新当前页面并跳转至无权限页面。

本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的页面登录方法的步骤。

本申请还提供一种用户登录设备，包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时实现如上所述的页面登录方法的步骤。

本申请提供一种页面登录方法，包括：在后端验证用户登录指令成功后，接收后端返回的token；将所述token保存至本地存储，同时将所述token添加至头部信息；当接收到用户的操作指令时，将包含所述头部信息的所述操作指令发送至所述后端，以使所述后端验证所述token是否在有效时长内，并在所述token有效时刷新所述token的有效时长，并返回用户信息和对应的路由权限表；根据所述用户信息从所述后端获取用户页面权限信息，并将所述用户页面权限信息添加至所述路由权限表；当用户发起页面更新请求时，根据所述路由权限表判断所述页面更新请求是否有效；其中，所述操作指令包括所述页面更新请求；若是，登录所述页面更新请求对应的目标页面。

本申请在每次用户发出操作指令时，后端可以识别操作指令包含的头部信息中的token，进而借助于token判断是否位于有效时长内，以避免由于用户离开等原因进而长时间未操作导致的信息泄露等风险。同时在确认用户信息后，将路由权限表置于前端，可以在每次用户发起页面更新请求时，根据路由权限表中的用户页面权限信息判断用户是否具有更新页面的操作权限，从而实现了页面级别的权限管理，确保控制非授权访问，有效拦截越权访问，提高了网络安全防护能力。同时由于每次发起页面更新请求时，均需要接收后端返回的用户页面权限信息，使得用户页面权限的管理更具有时效性。本申请还提供一种页面登录系统、计算机可读存储介质和用户登录设备，具有上述有益效果，此处不再赘述。

附图说明

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

图1为本申请实施例所提供的本申请提供一种页面登录方法的流程图；

图2为本申请实施例所提供的本申请提供一种页面登录系统结构示意图。

具体实施方式

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

请参考图1，图1为本申请实施例所提供的本申请提供一种页面登录方法的流程图，该方法包括：

S101：接收后端返回的token；

本步骤需要在验证用户登录指令成功后，才可接收后端返回的token。该token为后端验证用户登录指令成功后返回至前端。用户登录指令主要包括用户名、密码，或者用户名、密码及验证码等，当然还可以包括其他登录指令，例如面部数据、指纹数据等等。用户在访问系统时，首先需要输入需要登录账户的用户名和密码，后端在验证通过后，向前端返回token。该token与登录的用户账户相关联。

S102：将token保存至本地存储，同时将token添加至头部信息；

本步骤中，前端在接收到token时，将token保存至本地存储。在此对于何种本地存储不作限定，只要该本地存储位于前端内即可。

除了需要将token保存至本地存储外，还需要同时将token添加至头部信息。存储token时保存了token文件，而将token添加至头部信息可以是将token文件添加至头部信息中，也可以仅将token的内容添加至头部信息。

S103：当接收到用户的操作指令时，将包含头部信息的操作指令发送至后端，以使后端验证token是否在有效时长内，并在token有效时刷新token的有效时长，并返回用户信息和对应的路由权限表；

在此对于操作指令的具体内容不作限定，可以包含页面更新请求，或者在页面执行复制、选择、内容填写，甚至可以为无效的点击指令或鼠标移动指令等等，均可以视为操作指令。当然，为了保证系统的安全性，可以视部分操作为无效操作，例如在页面空白处重复点击鼠标等，在此不作具体限定。一旦用户执行操作生成对应的操作指令时，均需要将包含头部信息的操作指令发送至后端，以使后端识别操作指令的内容。

后端在接收到操作指令后，根据头部信息中的token判断其是否在有效时长内。由于token是在用户登录指令验证成功后，由后端生成并发送至前端的文件，其具有有效时长，用于限制用户登录的账户可持续登录时间，也即该账户可保持登录状态的时长。当后端验证确认token在有效时长内时，需要刷新token的有效时长。这样一旦用户持续在有效时长内生成操作指令，后端可以不断刷新token的有效时长，保证用户在登录状态的可持续操作，不必在有效时长结束后强制退出登录。

当然，若后端验证token超过有效时长，此时前端可以接收到返回的用户登录超时指令，则可以退出该用户账户，并强制退出当前页面并显示登录页面。当然，也可以不强制退出当前页面，采取其他限制操作方式，并提示用户重新登录，例如锁定当前页面并提示登录等，也应在本申请的保护范围内。

需要注意的是，后端接收到操作指令后，无论token是否在有效时长内，均需要回复前端。若token在有效时长内，则刷新token的有效时长，本实施例默认刷新token的有效时长相当于更改了前端本地存储中token以及头部信息中token的有效时长属性，即在后端对头部信息中的token后，由于后端一定会反馈至前端，则同理前端会更新本地存储中和头部信息中的token的有效时长属性。而在下一次向后端发送操作指令时，token的有效时长为默认时长减去两次操作指令的时间差。

在此对于token的最大有效时长(即用户登录指令验证成功后后端生成token时的默认时长)不作限定，应由本领域技术人员根据安全需求进行相应的设定。容易理解的是，安全要求等级越高的系统，其最大有效时长越短，例如可以为3分钟等。

在token处于有效时长内时，后端除了需要刷新token的有效时长，还需要返回用户信息和对应的路由权限表。

用户信息指的是用户所登录账户在后端存储的信息。由于用户登录时仅仅包含该账户的用户名和密码，而该账户的其他信息均存储在后端，一旦用户登录指令验证成功后则可以调取该账户的其他用户信息，包括但不限定于头像、性别、账号昵称等等。

此外，前端还需要接收后端返回的路由权限表。路由权限表指的是该用户在用户登录指令验证成功后在后端存储的、该账户可以登录或条件允许登录的网站或网页的路由地址，当然，也可以当前禁止访问的路由地址。需要注意的是，该路由权限表仅仅为用户登录指令验证成功那一时刻，在后端存储的该账户可以登录的网站或网页的路由地址。

优选的，在接收到用户信息后，还可以将用户信息分别保存至本地存储和VueX中。

之所以需要将用户信息分别保存在两个不同位置，是由于在每个位置的应用需求不同。在可视化页面变更用户的页面登录权限时，可以利用前端接口从本地存储中调取用户信息。而在每次进行页面更新并生成目标页面时，需要从VueX中调取用户信息。从VueX中调取用户信息主要应用到其中的beforeEach函数，当每次用户刷新页面时，都会调用beforeEach函数。

BeforeEach函数主要用于用户发起页面更新请求时，将头部信息发送至后端，后端验证token是否在有效时长内，若是则返回用户信息、路由权限表以及更新后的token。前端接收到更新后的token后，即表明后端确认之前发送的token有效，此时再发送获取用户页面权限信息的请求至后端，后端再返回用户页面权限信息。实质也即是将页面更新请求作为操作指令时执行S103和S104中的相应步骤的过程。

S104：根据用户信息从后端获取用户页面权限信息，并将用户页面权限信息添加至路由权限表；

在得到用户信息和路由权限表后，用户还需要获取用户页面权限信息。由于获得的路由权限表并不代表用户登录的该账户一定可访问的网站或网页，此时需要获取用户实际的可登录页面的权限信息，即用户页面权限信息。

本步骤中，可以利用token从后端获取用户页面权限信息，这样可以保证用户在获取用户页面权限信息时还处于登录状态，否则禁止获取用户页面权限信息。用户页面权限信息可以在后端实时修改。

在得到后端返回的用户页面权限信息后，将其添加至路由权限表，实质也就是生成动态路由。具体的，前端通过addroute动态生成路由。简单而言，在添加用户页面权限信息后，只有存在对应用户页面权限的路由地址才是该用户所登录的账户被允许访问的地址。

S105：当用户发起页面更新请求时，根据路由权限表判断页面更新请求是否有效；若是，进入S106；

在路由权限表添加用户页面权限信息后，当用户发起页面更新请求时，即可根据路由权限表判断该用户所请求访问的页面是否具有对应的页面权限，若是则进入S106。页面更新请求主要包括页面刷新请求和页面访问请求，即刷新当前页面和访问其他页面。即使用户在某一时刻具备某个页面的访问权限，然而可能由于该页面为限时访问页面或者由于错误的用户页面权限设定导致其非法访问，该用户在下一时刻则不存在同一页面的访问权限。一旦发现用户非法访问某页面，则可以及时更改该用户对于该页面的用户页面权限信息，这样用户在该页面执行下一次操作指令时由于重新请求到了已更改的用户页面权限信息，使其不具有该网页的访问权限。

需要注意的是，操作指令包括页面更新请求，也即是说，页面更新请求同样为操作指令中的一种，当用户发起页面更新请求时，也需要执行S103和S104中的步骤，然后根据得到的路由权限表执行上述判断。而对于其他操作指令，只要不是页面更新请求，则无需执行本步骤中的判断过程。

S106：登录页面更新请求对应的目标页面。

当路由权限表中存在该页面更新请求对应的目标页面的用户页面权限时，则该用户账户可以访问目标页面。

若根据路由权限表判断页面更新请求无效，则可以刷新当前页面并跳转至无权限页面，例如显示页面404错误。

本申请实施例在每次用户发出操作指令时，后端可以识别操作指令包含的头部信息中的token，进而借助于token判断是否位于有效时长内，以避免由于用户离开等原因进而长时间未操作导致的信息泄露等风险。同时在确认用户信息后，将路由权限表置于前端，可以在每次用户发起页面更新请求时，根据路由权限表中的用户页面权限信息判断用户是否具有更新页面的操作权限，从而实现了页面级别的权限管理，确保控制非授权访问，有效拦截越权访问，提高了网络安全防护能力。同时由于每次发起页面更新请求时，均需要接收后端返回的用户页面权限信息，使得用户页面权限的管理更具有时效性。

基于上述实施例，作为优选的实施例，在步骤S104得到路由权限表后，还可以包括：

将路由权限表以树形结构展示，生成可视化操作页面。

本实施例在得到路由权限表的基础上，以可视化的树形结构在页面中示出，相当于将后端存储的权限信息在前面可视化，便于直接可视化配置用户路由权限。

基于上述实施例，作为优选的实施例，接收后端返回的token之前，还包括：

S201：接收用户登录请求并发送至后端，以使后端根据用户登录请求生成实际验证码和实际验证码对应的临时token；

S202：接收用户登录指令；

用户登录指令包括用户名、密码和登录验证码；

S203：对用户名、密码和登录验证码分别进行格式验证；若格式验证均通过，进入S204；

S204：向后端发送实际登录请求，以使后端利用临时token获取实际验证码并对登录验证码验证；若实际验证码与登录验证码不同，进入S205；若实际验证码与登录验证码相同，进入S206；

S205：生成验证码无效的提示；

S206：验证用户名和密码是否正确；若用户名和密码正确，进入S207；若用户名和密码不正确，进入S208；

S207：通过实际登录请求，执行步骤S101中的“接收后端返回的token”；

S208：拒绝实际登录请求。

本申请实施例对应上述实施例中S101的条件，即如何在后端验证用户登录指令成功。本实施例可与上述实施例相结合，即先执行本实施例中针对于用户登录指令的验证，再执行上一实施例中针对于用户页面权限的验证和管理。

具体的，用户登录请求实际上指的是用户请求验证码的过程，步骤S201中并不限定用户登录请求中是否包含用户名和密码，只要求用户登录请求为该用户名对应的验证码请求。也即是说，S201中的实际验证码只与该用户名相对应，并用户名的密码无任何关联。用户可以只输入用户名，便可发送用户登录请求。

后端在接收到用户登录请求后，生成实际验证码和实际验证码对应的临时token，实际验证码为需要向用户所在前端返回的验证码，而临时token则存储于后端。也即是说，在后端并不直接存储实际验证码，仅仅存在与实际验证码对应的临时token。

S202中才需要接收包括用户名、密码和登录验证码的用户登录指令。

接收到用户登录指令后，前端先对用户登录指令进行格式验证，即确保输入的格式正确。例如实际验证码均为数字时用户输入的登录验证码不应出现数字以外的其他符号或文字。

当用户名、密码和登录验证码三个格式验证中有任何一个错误时，禁止用户登录，并提示相应错误。例如，用户名不存在则提示“用户名格式错误”，密码错误则可以提示“密码格式错误”等

若格式验证均通过，则向后端发送实际登录请求。后端将利用临时token获取实际验证码并对接收到的登录验证码验证。验证失败则生成验证码无效的提示。若验证通过，执行S206验证用户名和密码是否正确。若用户名存在且和密码相匹配，则可视为步骤S101中的条件“在后端验证用户登录指令成功”，此时后端生成token，并发送至前端。

下面对本申请实施例提供的一种页面登录系统进行介绍，下文描述的页面登录系统与上文描述的一种页面登录方法可相互对应参照。

图2为本申请实施例所提供的本申请提供一种页面登录系统结构示意图，本申请还提供一种页面登录系统，包括：

接收模块100，用于接收后端返回的token；其中，所述token为后端验证用户登录指令成功后发出；

存储模块200，用于将所述token保存至本地存储，同时将所述token添加至头部信息；

验证模块300，用于接收到用户的操作指令时，将包含所述头部信息的所述操作指令发送至所述后端，以使所述后端验证所述token是否在有效时长内，并在所述token有效时刷新所述token的有效时长，并返回用户信息和对应的路由权限表；

页面登录模块400，用于根据所述用户信息从所述后端获取用户页面权限信息，并将所述用户页面权限信息添加至所述路由权限表；

判断模块500，用于用户发起页面更新请求时，根据所述路由权限表判断所述页面更新请求是否有效；其中，所述操作指令包括所述页面更新请求；

页面展示模块600，用于所述判断模块判断结果为是时，登录所述页面更新请求对应的目标页面。

基于上述实施例，作为优选的实施例，还包括：

用户登录指令模块，用于接收用户登录请求并发送至后端，以使所述后端根据所述用户登录请求生成实际验证码和所述实际验证码对应的临时token；接收所述用户登录指令；所述用户登录指令包括用户名、密码和登录验证码；对所述用户名、所述密码和所述登录验证码分别进行格式验证；若格式验证均通过，向所述后端发送实际登录请求，以使所述后端利用所述临时token获取所述实际验证码并对所述登录验证码验证；若所述实际验证码与所述登录验证码不同，则生成验证码无效的提示；若所述实际验证码与所述登录验证码相同，则验证所述用户名和所述密码是否正确；若所述用户名和所述密码正确，通过所述实际登录请求，执行接收后端返回的token的步骤；若所述用户名和所述密码不正确，拒绝所述实际登录请求。

基于上述实施例，作为优选的实施例，还包括：

可视化模块，用于将所述路由权限表以树形结构展示，生成可视化页面。

基于上述实施例，作为优选的实施例，还包括：

存储模块，用于将所述用户信息分别保存至所述本地存储和VueX中；以便在所述可视化页面变更用户的页面登录权限时，利用前端接口从所述本地存储中调取所述用户信息；以便在生成所述目标页面时，从所述VueX中调取所述用户信息。

基于上述实施例，作为优选的实施例，还包括：

超时处理模块，用于若所述后端验证所述token超过有效时长，接收所述后端返回的用户登录超时指令，强制退出当前页面并显示登录页面。

基于上述实施例，作为优选的实施例，还可以包括：

本申请还提供了一种计算机可读存储介质，其上存有计算机程序，该计算机程序被执行时可以实现上述实施例所提供的步骤。该存储介质可以包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本申请还提供了一种用户登录设备，可以包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时，可以实现上述实施例所提供的步骤。当然所述用户登录设备还可以包括各种网络接口，电源等组件。

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

本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

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

Claims

1.一种页面登录方法，其特征在于，包括：

若是，登录所述页面更新请求对应的目标页面。

2.根据权利要求1所述的页面登录方法，其特征在于，接收后端返回的token之前，还包括：

若所述用户名和所述密码不正确，拒绝所述实际登录请求。

3.根据权利要求1所述的页面登录方法，其特征在于，还包括：

将所述路由权限表以树形结构展示，生成可视化页面。

4.根据权利要求3所述的页面登录方法，其特征在于，还包括：

将所述用户信息分别保存至所述本地存储和VueX中；

以便在生成所述目标页面时，从所述VueX中调取所述用户信息。

5.根据权利要求4所述的页面登录方法，其特征在于，若所述后端验证所述token超过有效时长，还包括：

6.根据权利要求1所述的页面登录方法，其特征在于，若根据所述路由权限表判断所述页面更新请求无效，还包括：

刷新当前页面并跳转至无权限页面。

7.一种页面登录系统，其特征在于，包括：

8.根据权利要求7所述的页面登录系统，其特征在于，还包括：

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-6任一项所述的页面登录方法的步骤。

10.一种用户登录设备，其特征在于，包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时实现如权利要求1-6任一项所述的页面登录方法的步骤。