Question

我们在刷新身份验证令牌流程上遇到了麻烦，如果同时使用相同的过期访问令牌发出多个请求，则所有请求都将成为后端以刷新令牌，并且它们的刷新令牌也将不同回应。现在，当下一个请求发出时，将使用上一个响应的刷新令牌，该令牌可能是最新的，也可能不是最新的。

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

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

Answer 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));
}

禁用并发或并发HTTP请求AXIOS

1 个答案: