4-07：用户被动退出解决方案之主动处理

4-07：用户被动退出解决方案之主动处理

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

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

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

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

1. 动态 token（可变 token）
2. 刷新 token
3. 时效 token
4. ...

这些方案各有利弊，没有绝对的完美的策略。

而我们此时所选择的方案就是 时效 token

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

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

1. 在用户登陆时，记录当前 登录时间
2. 制定一个 失效时长
3. 在接口调用时，根据 当前时间 对比 登录时间 ，看是否超过了 时效时长
   1. 如果未超过，则正常进行后续操作
   2. 如果超过，则进行 退出登录 操作

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

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

import { TIME_STAMP, TOKEN_TIMEOUT_VALUE } from '@/constant'
import { setItem, getItem } from '@/utils/storage'
/**
 * 获取时间戳
 */
export function getTimeStamp() {
  return getItem(TIME_STAMP)
}
/**
 * 设置时间戳
 */
export function setTimeStamp() {
  setItem(TIME_STAMP, Date.now())
}
/**
 * 是否超时
 */
export function isCheckTimeout() {
  // 当前时间戳
  var currentTime = Date.now()
  // 缓存时间戳
  var timeStamp = getTimeStamp()
  return currentTime - timeStamp > TOKEN_TIMEOUT_VALUE
}

在 constant 中声明对应常量：

// token 时间戳
export const TIME_STAMP = 'timeStamp'
// 超时时长(毫秒) 两小时
export const TOKEN_TIMEOUT_VALUE = 2 * 3600 * 1000

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

import { setTimeStamp } from '@/utils/auth'

login(context, userInfo) {
      ...
      return new Promise((resolve, reject) => {
        ...
          .then(data => {
            ...
            // 保存登录时间
            setTimeStamp()
            resolve()
          })
      })
    },

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

import { isCheckTimeout } from '@/utils/auth'

if (store.getters.token) {
      if (isCheckTimeout()) {
        // 登出操作
        store.dispatch('user/logout')
        return Promise.reject(new Error('token 失效'))
      }
      ...
    }

那么至此我们就完成了 主动处理 对应的业务逻辑