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

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

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

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

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

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

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

3. 返回到登录页；

１.用户主动退出策略

1. 在状态管理中添加action

2. 添加退出登录事件

2. 用户被动退出策略

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

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

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

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

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

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

１.动态 token（可变 token）

２.刷新 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通信，让后端主动推送消息给前端，前端收到该通知后主动退出，其原理是一样的，此处不再赘述。