拦截器中的 axios react-keycloak/web 令牌

Question

我正在尝试将 request inteceptor 与 react-keycloak/web 一起使用 - 但是这样做时会出现一系列错误。

import axios from 'axios';
import { useKeycloak } from '@react-keycloak/web';

const { keycloak } = useKeycloak();

const instance = axios.create({
  baseURL: 'https://example.com/api/v1/',
  timeout: 30000,
});

instance.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `${keycloak.token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

但我明白了：

React Hook "useKeycloak" 不能在顶层调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数 react-hooks/rules-of-hooks 中调用

现在我当然尝试使用例如 GetToken() 创建一个函数：

function GetToken() {
  const { keycloak } = useKeycloak();
  return keycloak.token
}

但这样做会让我：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

我在这里做错了什么？

Answer 1

你不能使用反应树之外的反应钩子。

您可以导出 axoios 实例并将其导入 react 内部的其他位置（例如：App.js）并在那里设置拦截器。

例如：

import axiosIns from 'api';
import { useKeycloak } from '@react-keycloak/web';
import { useEffect } from "react";
import WholeApp from "WholeApp";

const App = () => {
    const { keycloak } = useKeycloak();

    useEffect(() => {
        axiosIns.interceptors.request.use(
            (config) => {
                config.headers.Authorization = `${keycloak.token}`;
                return config;
            },
            (error) => {
                return Promise.reject(error);
            }
        );
    }, []);

    return <WholeApp />;
}