01-Token过期-概念介绍

分析登录接口的数据

  • access_token：授权令牌
  • expires_in：token 过期时间
  • refresh_token：刷新获取新的 token，只能使用一次

为什么 access_token 有过期时间，而且比较短？

  • 为了安全

方法一：
拦截每个请求，先判断是否过期。若已过期，则刷新 token 再请求。
优点：请求前拦截，节省请求次数
缺点：前端判断过期时间，可能不准确，也可能被篡改

方法二：
拦截每个响应，若响应告诉你过期了，则刷新 token 再请求一次。
优点：不用判断过期时间
缺点：多请求一次

综上，选择方法二。

02-Token过期-分析响应拦截器

image.png

  • config：本次请求的配置信息
  • data：响应结果
  • headers

  • request：本次请求的 XHR 对象

    03-Token过期-axios错误

    1. // 响应拦截器
    2. request.interceptors.response.use(function (response) { // 状态码为 2xx
    3. return response
    4. }, function (error) { // 状态码不是 2xx
    5. if (error.response) { // 请求发出去了，收到响应，但是状态码超出了 2xx
    7. } else if (error.request) { // 请求发出去了，没收到响应
    8.   // 例如，请求超时、断网
    10. } else { // 在设置请求时发生了错误
    11. }
    13. console.dir(error)
    14. return Promise.reject(error)
    15. })

    04-Token过期-错误消息提示

    image.png

    05-Token过期-实现基本流程逻辑

    image.png

    06-Token过期-关于多次请求的问题

  • refresh_token 只能用一次

image.png

07-Token过期-多个请求问题的概述

06已分析

08-Token过期-解决多次请求刷新Token问题

09-Token过期-解决多次请求其他接口重试的问题

image.png
image.png