后台管理系统用户退出登录方案实现
后台管理系统用户退出登录方案实现
在后台管理系统中，用户退出登录是一个常见的功能需求。本文将详细介绍两种退出登录方案的实现：用户主动退出和用户被动退出。通过具体的代码示例，帮助开发者更好地理解和实现这一功能。
退出登录一直是一个通用的前端实现方案，对于退出登录而言，它的触发时机一般有两种：
- 用户主动退出，即用户点击登录按钮之后退出；
- 用户被动退出，Token过期或被 其他人"顶下来" 时退出；
无论是什么退出方式，在用户退出时，所需要执行的操作都是固定的：
- 清理掉当前用户缓存数据；
- 清理掉权限相关配置；
- 返回到登录页；
1. 用户主动退出策略
在状态管理中添加action
添加退出登录事件
2. 用户被动退出策略
用户被动退出的情况一般是指token过期或者系统需要满足单点登录，相应的可以分为前端主动处理和前端被动处理两种方式。
2.1. 被动退出前端主动处理
想要搞明白 主动处理 方案，那么首先我们得先去搞明白对应的背景以及业务逻辑 。
那么首先我们先明确一下对应的背景：
我们知道 token 表示了一个用户的身份令牌，对 服务端 而言，它是只认令牌不认人的。所以说一旦其他人获取到了你的 token ，那么就可以伪装成你，来获取对应的敏感数据。
所以为了保证用户的信息安全，那么对于 token 而言就被制定了很多的安全策略，比如：
- 动态 token（可变 token）
- 刷新 token
- 时效 token
……
这些方案各有利弊，没有绝对的完美的策略，而一般所选择的方案就是时效 token。
对于 token 本身是拥有时效的，这个大家都知道。但是通常情况下，这个时效都是在服务端进行处理，而此时我们要在 服务端处理 token 时效的同时，在前端主动介入 token 时效的处理中，从而保证用户信息的更加安全性。
那么对应到我们代码中的实现方案为：
- 在用户登陆时，记录当前 登录时间；
- 制定一个 失效时长；
- 在接口调用时，根据当前时间对比登录时间 ，看是否超过了时效时长；
- (1). 如果未超过，则正常进行后续操作
- (2). 如果超过，则进行退出登录操作
那么明确好了对应的方案之后，接下来我们就去实现对应代码。
创建 utils/auth.js 文件，并写入以下代码：
以下是在stotage中的代码：
以下是在constant 中声明对应常量：
在用户登录成功之后去设置时间，到 store/user.js 的 login 中：
在 utils/request 对应的请求拦截器中进行主动介入：
2.2. 被动退出前端被动处理
首先我们需要先明确被动处理需要应对两种业务场景：我们一个一个看，首先是Token过期：
我们知道对于 token 而言，本身就是具备时效的，这个是在服务端生成 token 时就已经确定的。
而此时我们所谓的 token 过期指的就是：
服务端生成的 token 超过 服务端指定时效 的过程。
而对于单点登录而言，指的是：
当用户 A 登录之后，token 过期之前。
用户 A 的账号在其他的设备中进行了二次登录，导致第一次登录的 A 账号被 “顶下来” 的过程。
即：同一账户仅可以在一个设备中保持在线状态
那么明确好了对应的背景之后，接下来我们来看对应的业务处理场景：
从背景中我们知道，以上的两种情况，都是在服务端进行判断的，而对于前端而言其实是服务端通知前端的一个过程。
所以说对于其业务处理，将遵循以下逻辑：
- 服务端返回数据时，会通过特定的状态码通知前端；
- 当前端接收到特定状态码时，表示遇到了特定状态：token 时效 或 单点登录；
- 此时进行退出登录处理；
那么明确好了业务之后，接下来我们来实现对应代码：
在 utils/request 的响应拦截器中，增加以下逻辑：
对于单点登录而言，需要配合websockt通信，让后端主动推送消息给前端，前端收到该通知后主动退出，其原理是一样的，此处不再赘述。