购物网站的商品展示模块哪家公司网站做得好

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

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