如何防止在另一个呼叫完成之前向 Axios 发出请求？

Question

我正在开发一个更大的网络应用程序，它会从不同的地方多次调用服务器。我们正在使用一个生命周期为 15 分钟的令牌。这意味着它使用 refreshtoken 来生成一个新的令牌，并在它过期时生成一个新的 refreshtoken。我们正在使用 axios 的拦截器来查看令牌是否已过期。基于此，我们正在执行调用以生成新的调用。

现在的问题是，在我们请求获取新令牌期间进行的所有 API 调用都将失败！

所以我现在的问题是是否可以在特定调用完全执行之前阻止发送请求（使用 axios）？

export const runRefreshToken = (errorCallback: () => void): void => {
Axios.interceptors.response.use(
    (response: AxiosResponse<any>): AxiosResponse<any> => {
        return response;
    }, (error: any): any => {
        const original = error.config;
        const loginVerification = !(original.url as string).startsWith("api/login");

        if (error.response && error.response.status === 401 && error.config && loginVerification && !error.config.__retry) {
            return new Promise((resolve): void => {
                original.__retry = true;
                const response = fetch("api/login/refresh-token", { method: 'POST' })
                    .then((): AxiosPromise<any> => {
                        return Axios(original);
                    })
                    .catch((): void => errorCallback())
                resolve(response);
            });
        } else if (error.config.__retry && original.url !== "api/login/verify-authentication") {
            history.push("/login");
        }

        return Promise.reject(error);
    }
);

}

提前致谢

Answer 1

这是我在几个团队中遇到的问题。我们使用的解决方案是应用顶层的一个组件，它发出初始请求并且在成功之前不渲染任何子节点。

import React from 'react';
import { useAuthUser } from './hooks';

export const AuthenticateUser = ({ children }) => {
  const { hasError, isLoading, shouldRedirectToLoginPage, handleRedirectToLoginPage } = useAuthUser();

  if (isLoading) {
    return <LoadingPage>;
  }
  if (hasError) {
    return <ErrorPage>;
  }

  return children;
};

钩子文件的样子

import { userSlice } from 'state/user';
import { useAppDispatch } from 'state/hooks';
import { useEffect } from 'react';
import { useUserDetails } from 'api/userRequests';

export function useUserDetailsProps(): UserDetailsProps {
  const { data, isLoading, error } = useUserDetails();

  const dispatch = useAppDispatch();
  useEffect(() => {
    if (data != null) {
      dispatch(userSlice.actions.authenticatedUserReceived(data));
    }
  }, [data, dispatch]);

  return {
    hasError: !!error,
    isLoading,
    shouldRedirectToLoginPage: !!error && error.response?.status === 401,
    handleRedirectToLoginPage,
  };
}