[JavaScript知识库]Vue2+Ts实战项目开发与项目优化（二）用户登录和身份认证

关于Token过期的问题

• access_token 作用：获取需要授权的接口数据
• expires_in 作用 access_token 过期时间
• refresh_token 作用：刷新获取新的 access_token

方法一：
在请求发起前拦截每个请求，判断 token 的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求
优：在请求前拦截，能节省请求，省流量
缺：需要后端额外提供一个token过期时间的字段，使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败

方法二：
不在请求前拦截，而是拦截返回后的数据。先发起请求，接口返回过期后，先刷新token，再继续一次重试
优：不需要额外的token过期字段，不需要判断时间
缺：会消耗多一次请求，耗流量

综上，方法一和方法二优缺点是互补的，方法一有校验失败的风险（本地时间被篡改时，当然一般没有用户闲的去改本地时间），方法二更简单粗暴，等知道服务器已经过期了再重试一次，只是会耗多一个请求。

分析响应拦截器

request.interceptors.response.use(
  (response) => {
    // 如果是自定义错误状态码，错误处理写到这里
    return response
  }, // 状态码为 2xx 都会进入这里
  (error) => { // 超出 2xx 状态码都会执行这里
    console.dir(error)
    // 如果是使用的 HTTP 状态码，错误处理就写到这里
    return Promise.reject(error)
  })