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

时间:2020-10-08 19:26:31

标签: react-native oauth axios jwt

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

我们当前在每个请求之前都使用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);
  }
);

1 个答案:

答案 0 :(得分:1)

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

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

16 = ?

显然,这还意味着您必须编写一些逻辑来发送当前刷新令牌(如果实例拦截器中包含该令牌)。