刷新令牌的axios响应拦截器不断触发

Question

逻辑： 每个请求都有一个 JWT 授权标头来验证用户的身份。如果过期，则有一个准备好刷新 JWT 的 cookie 端点。

我正在使用 axios 和 拦截器响应 来检查客户端是否收到 401 来尝试刷新 JWT。 cookie 可能有效或无效。

问题是刷新 JWT 的拦截器永远不会停止触发，我认为我的请求同步有问题。以下是我的代码：

function refreshToken(dispatch) {
  return new Promise((resolve, reject) => {
    instance.put('/auth').then((response) => {
      dispatch({ type: "UPDATE_AUTH", payload: response.data });
      resolve(response);
    })
    .catch((error) => {
      reject(error);
    });
  });
}

instance.interceptors.response.use(
    response => {
      return response;
    },
    err => {
      const error = err.response;
      
      if (error.status === 401 && error.config && !error.config._retry) {
        error.config._retry = true;

        return refreshToken(dispatch).then((resp) => {
          return instance(error.config);
        })
        .catch((e) => {
          return Promise.reject(e);
        });
      }
      return Promise.reject(error);
    }
  );

Answer 1

如果您有多个并行请求，刷新 JWT 将等于请求数。尝试仅在第一次发送/auth 并阻止下一个请求。您可以使用localStorage 完成此任务。

let requests = [];

instance.interceptors.response.use(
  response => {
    return response;
  },
  err => {
    const error = err.response;
    
    if (error.status === 401 && error.config && !error.config._retry) {
      requests.push(error.config);
      if (!localStorage.getItem('refresh')) {
        localStorage.setItem('refresh', 'done');
        error.config._retry = true;

        return refreshToken(dispatch).then((resp) => {
          localStorage.removeItem('refresh');
          
           const token = getAccessToken();
           requests.map(req => {
              req.headers.Authorization = `Bearer ${token}`;
              return instance(req)
           })
        })
        .catch((e) => {
          localStorage.removeItem('refresh');
          return Promise.reject(e);
        });
      }
    } else {
      requests = [];
    }
    return Promise.reject(error);
  }
);