禁用并发或同时的 HTTP 请求 AXIOS答案

【问题标题】：Disable concurrent or simultaneous HTTP requests AXIOS禁用并发或同时的 HTTP 请求 AXIOS
【发布时间】：2018-07-05 17:12:40
【问题描述】：

我们的刷新身份验证令牌流程有问题，如果同时使用同一个过期的访问令牌发出多个请求，所有请求都会在后端刷新令牌，并且它们的刷新令牌中会有不同的刷新令牌回应。现在，当发出下一个请求时，将使用最后一个响应的刷新令牌，它可能是最新的，也可能不是最新的。

解决这个问题的一种方法是让 UI（在 vue 中使用 axios）一次只发送一个请求。因此，如果刷新令牌，则以下请求将具有最新的令牌。

因此我想知道 axios 是否有禁用同时请求的默认选项，因为我在网上找不到任何关于它的信息。另一种解决方案是维护一个请求队列，其中每个请求仅在收到前一个请求的响应（成功或失败）时发送（手动选项）。我知道这可能会降低 UI 中的性能，但它也会减轻后端的负载。

【问题讨论】：

标签： authentication oauth-2.0 axios refresh-token

【解决方案1】：

我发现here 的一个可能的解决方案是使用拦截器：

let isRefreshing = false;
let refreshSubscribers = [];

const instance = axios.create({
  baseURL: Config.API_URL,
});

instance.interceptors.response.use(response => {
 return response;
}, error => {
  const { config, response: { status } } = error;
  const originalRequest = config;

  if (status === 498) { //or 401
    if (!isRefreshing) {
      isRefreshing = true;
      refreshAccessToken()
        .then(newToken => {
          isRefreshing = false;
          onRrefreshed(newToken);
        });
    }

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });
    return retryOrigReq;
  } else {
    return Promise.reject(error);
  }
});

subscribeTokenRefresh(cb) {
  refreshSubscribers.push(cb);
}

onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
}

【讨论】：

如果它同时捕获多个请求的错误，它不会同时发送刷新请求吗？意味着您多次刷新令牌，并且可能与后端不同步。这是最初的问题。它在我们系统中的实现方式是刷新流是服务调用的一部分，而不是单独的调用。我昨天解决它的方法是将刷新令牌中的 expiring_time 与带有客户端的令牌进行比较。这样您就可以确定您对所有后续请求都使用了最新的令牌。
不，上述方法的想法是调用 refreshAccessToken() 一次，然后使用唯一请求的新令牌更新所有订阅者。您可以点击链接查看一些 cmets 和 fork，但总体思路应该适用于您的情况。