如何使用 axios 请求拦截器实现静默令牌刷新？答案

【问题标题】：How to implement silent token refresh with axios request interceptor?如何使用 axios 请求拦截器实现静默令牌刷新？
【发布时间】：2021-01-23 21:43:15
【问题描述】：

我们正在实施基于令牌的身份验证，当用户登录时，我们会生成访问和刷新令牌，然后将其与时间戳一起保存在设备上，以便我们稍后检查访问令牌是否过期。

我们目前在每个请求之前使用 axios 拦截器，并使用我们之前生成访问和刷新令牌时保存的时间戳检查令牌是否仍然有效，但是当访问令牌过期并且我们正在发出请求时要刷新令牌，应用程序会进行无限循环，并且没有任何请求通过（原始令牌 API 请求和刷新令牌 API 请求）。你可以在下面看到我的代码：

const instance = axios.create({
  baseURL: 'http://localhost:8080'
});

const refreshToken = () => {
  return new Promise((resolve, reject) => {
    instance
      .post('/token/renew')
      .then(response => {
        resolve('refresh successful');
      })
      .catch(error => {
        reject(Error(`refresh fail: ${error}`));
      });
  });
};

instance.interceptors.request.use(
  async config => {
    const timestamp = 1602155221309;
    const diffMinutes = Math.floor(Math.abs(Date.now() - timestamp) / 60000);

    // if diffMinutes is greater than 30 minutes
    if (diffMinutes > 30) {
      const tokenResponse = await refreshToken();
      return config;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

【问题讨论】：

标签： react-native oauth axios jwt

【解决方案1】：

无限循环是由您的拦截器触发另一个 Axios 请求引起的，该拦截器也将在该请求上运行并永远触发另一个 Axios 请求。

一个简单的解决方案是使用不包含任何拦截器的默认 axios 实例发出刷新令牌网络请求：

const refreshToken = () => {
  // You can skip returning a new `Promise` since `axios.post` already returns one.
  return axios.post("YOUR_BASE_URL/token/renew");
};

显然，这也意味着如果您的实例拦截器中包含当前刷新令牌，则您必须编写一些逻辑来发送当前刷新令牌。

【讨论】：