在自定义挂钩内创建带有令牌的 axios 实例仅适用于第一个请求

Question

我目前尝试创建一个自定义钩子，它创建一个自定义 axios 实例，该实例在授权标头中具有令牌。

我目前的方法是这样的：

export default function useAxiosAuthenticated() {

    const {getAccessTokenSilently} = useAuth0();
    const AxiosAuthenticated: AxiosInstance = axios.create({
        baseURL: GeneralHelper.APIUrl
    });


    useEffect(() => {

        AxiosAuthenticated.interceptors.request.use(async (config) => {

            const token: string = await getAccessTokenSilently();
            config.headers.Authorization = `Bearer ${token}`;

            return config;

        });


    }, [getAccessTokenSilently]);


    return AxiosAuthenticated;

}

如果我这样做，它对于第一个请求来说工作得很好，所有其他请求都会失败并显示

401 - Unauthorized

。 我尝试将

AxiosAuthenticated

对象保存为状态，但即使第一个请求也不起作用并抛出另一个 401。

也许它与代码的 async/await 部分有关？ 也许我第二次没有得到“完成”的物体？

我以前的方法是我有这个 TypeScript 文件：

export const AxiosAuthenticated: AxiosInstance = axios.create({
    baseURL: GeneralHelper.APIUrl
});

export const AddTokenInterceptor = (tokenObtainFunction: Function): void => {

    AxiosAuthenticated.interceptors.request.use(async (config) => {

        const token: string = await tokenObtainFunction();
        config.headers.Authorization = `Bearer ${token}`;

        return config;

    });
};

在我的组件中我这样使用它：

useEffect(() => {

        AddTokenInterceptor(getAccessTokenSilently);

        getAccessTokenSilently().then(token => tempToken.current = token);


    }, [getAccessTokenSilently]);

然而，这种方法工作得很好，但在某些组件中重复了。 由于自定义钩子用于减少逻辑重复，我认为它们将是更好的方法。

Answer 1

你可以这样做。

export const axiosInstance = axios.create({
  baseURL: GeneralHelper.APIUrl,
  headers: {
    Authorization: '',
  }
});

您可以将其添加到一个位置（例如：在应用程序组件或 AuthenticatedRoutes 中）

useEffect(() => {
    const token: string = await getAccessTokenSilently();
    axiosInstance.defaults.headers.Authorization = `Bearer ${token}`;
}, [getAccessTokenSilently]);