526互联

实现无感刷新token

发布时间 2023-11-17 16:17:47作者: 柯基与佩奇

目录

需求

当 token 过期的时候，刷新 token,前端需要做到无感刷新 token,即刷 token 时要做到用户无感知，避免频繁登录。实现思路

方法一
后端返回过期时间，前端判断 token 过期时间,去调用刷新 token 接口
缺点：需要后端额外提供一个 token 过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。

方法二
写个定时器，定时刷新 token 接口
缺点：浪费资源,消耗性能,不建议采用。

方法三
在响应拦截器中拦截，判断 token 返回过期后，调用刷新 token 接口

实现

axios 的基本骨架,利用 service.interceptors.response 进行拦截

import axios from "axios";

service.interceptors.response.use(
  (response) => {
    if (response.data.code === 409) {
      return refreshToken({
        refreshToken: localStorage.getItem("refreshToken"),
        token: getToken(),
      })
        .then((res) => {
          const { token } = res.data;
          setToken(token);
          response.headers.Authorization = `${token}`;
        })
        .catch((err) => {
          removeToken();
          router.push("/login");
          return Promise.reject(err);
        });
    }
    return response && response.data;
  },
  (error) => {
    Message.error(error.response.data.msg);
    return Promise.reject(error);
  }
);

问题解决

问题一：如何防止多次刷新 token

import axios from "axios";
// 是否正在刷新的标记
let isRefreshing = false;
service.interceptors.response.use(
  (response) => {
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true;
        return refreshToken({
          refreshToken: localStorage.getItem("refreshToken"),
          token: getToken(),
        })
          .then((res) => {
            const { token } = res.data;
            setToken(token);
            response.headers.Authorization = `${token}`;
          })
          .catch((err) => {
            removeToken();
            router.push("/login");
            return Promise.reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      }
    }
    return response && response.data;
  },
  (error) => {
    Message.error(error.response.data.msg);
    return Promise.reject(error);
  }
);

问题二：同时发起两个或者两个以上的请求时，其他接口怎么解决

当第二个过期的请求进来，token 正在刷新，先将这个请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新 token 后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢？为了解决这个问题，得借助 Promise。将请求存进队列中后，同时返回一个 Promise，让这个 Promise 一直处于 Pending 状态（即不调用 resolve），此时这个请求就会一直等啊等，只要不执行 resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，再调用 resolve，逐个重试。最终代码：

import axios from "axios";

// 是否正在刷新的标记
let isRefreshing = false;
//重试队列
let requests = [];
service.interceptors.response.use(
  (response) => {
    //约定code 409 token 过期
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true;
        //调用刷新token的接口
        return refreshToken({
          refreshToken: localStorage.getItem("refreshToken"),
          token: getToken(),
        })
          .then((res) => {
            const { token } = res.data;
            // 替换token
            setToken(token);
            response.headers.Authorization = `${token}`;
            // token 刷新后将数组的方法重新执行
            requests.forEach((cb) => cb(token));
            requests = []; // 重新请求完清空
            return service(response.config);
          })
          .catch((err) => {
            //跳到登录页
            removeToken();
            router.push("/login");
            return Promise.reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise((resolve) => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push((token) => {
            response.headers.Authorization = `${token}`;
            resolve(service(response.config));
          });
        });
      }
    }
    return response && response.data;
  },
  (error) => {
    Message.error(error.response.data.msg);
    return Promise.reject(error);
  }
);

注意事项：

要注意的一点是，实际应用时，要注意：

  1. 刷新 token 时如果调接口，所使用的网络请求工具不能也使用这个封装的工具，否则就会陷入无限循环，可以使用简单未封装的方式请求。
  2. 本例使用的方法，是进行请求前刷新 token。也可以使用先调网络请求，如果接口返回错误码表示 token 过期，则刷新 token，再重新请求的方式。