后台管理系统用户退出登录方案实现

发布于:2025-02-11 ⋅ 阅读:(50) ⋅ 点赞:(0)

退出登录一直是一个通用的前端实现方案,对于退出登录而言,它的触发时机一般有两种:

1. 用户主动退出,即用户点击登录按钮之后退出;

2. 用户被动退出,Token过期或被 其他人"顶下来" 时退出;

那么无论是什么退出方式,在用户退出时,所需要执行的操作都是固定的:

1. 清理掉当前用户缓存数据;

2. 清理掉权限相关配置;

3. 返回到登录页;

1.用户主动退出策略

1. 在状态管理中添加action

2. 添加退出登录事件

2. 用户被动退出策略

用户被动退出的情况一般是指token过期或者系统需要满足单点登录,相应的可以分为前端主动处理和前端被动处理两种方式。

2.1. 被动退出前端主动处理

想要搞明白 主动处理 方案,那么首先我们得先去搞明白对应的背景以及业务逻辑 。

那么首先我们先明确一下对应的背景:

我们知道 token 表示了一个用户的身份令牌,对 服务端 而言,它是只认令牌不认人的。所以说一旦其他人获取到了你的 token ,那么就可以伪装成你,来获取对应的敏感数据。

所以为了保证用户的信息安全,那么对于 token 而言就被制定了很多的安全策略,比如:

1.动态 token(可变 token)
2.刷新 token
3. 时效 token

这些方案各有利弊,没有绝对的完美的策略,而一般所选择的方案就是时效 token。

对于 token 本身是拥有时效的,这个大家都知道。但是通常情况下,这个时效都是在服务端进行处理,而此时我们要在 服务端处理 token 时效的同时,在前端主动介入 token 时效的处理中,从而保证用户信息的更加安全性。

那么对应到我们代码中的实现方案为:

1. 在用户登陆时,记录当前 登录时间;

2. 制定一个 失效时长;

3. 在接口调用时,根据当前时间对比登录时间 ,看是否超过了时效时长;

(1). 如果未超过,则正常进行后续操作

(2). 如果超过,则进行退出登录操作

那么明确好了对应的方案之后,接下来我们就去实现对应代码。

创建 utils/auth.js 文件,并写入以下代码:

以下是在stotage中的代码:

以下是在constant 中声明对应常量:

在用户登录成功之后去设置时间,到 store/user.js 的 login 中:

在 utils/request 对应的请求拦截器中进行主动介入:

2.2. 被动退出前端被动处理

首先我们需要先明确被动处理需要应对两种业务场景:

我们一个一个看,首先是Token过期:

我们知道对于 token 而言,本身就是具备时效的,这个是在服务端生成 token 时就已经确定的。

而此时我们所谓的 token 过期指的就是:

服务端生成的 token 超过 服务端指定时效 的过程。

而对于单点登录而言,指的是:

当用户 A 登录之后,token 过期之前。

用户 A 的账号在其他的设备中进行了二次登录,导致第一次登录的 A 账号被 “顶下来” 的过程。

即:同一账户仅可以在一个设备中保持在线状态

那么明确好了对应的背景之后,接下来我们来看对应的业务处理场景:

从背景中我们知道,以上的两种情况,都是在服务端进行判断的,而对于前端而言其实是服务端通知前端的一个过程。

所以说对于其业务处理,将遵循以下逻辑:

1. 服务端返回数据时,会通过特定的状态码通知前端;

2. 当前端接收到特定状态码时,表示遇到了特定状态:token 时效 或 单点登录;

3. 此时进行退出登录处理;

那么明确好了业务之后,接下来我们来实现对应代码:

在 utils/request 的响应拦截器中,增加以下逻辑:

对于单点登录而言,需要配合websockt通信,让后端主动推送消息给前端,前端收到该通知后主动退出,其原理是一样的,此处不再赘述。


网站公告

今日签到

点亮在社区的每一天
去签到