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

Posted 2023-02-19

【中文标题】拦截器中的 axios react-keycloak/web 令牌

【英文标题】：axois react-keycloak/web token in inteceptor

【发布时间】：2021-12-20 14:18:45

【问题描述】：

我正在尝试将 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

但这样做会让我：

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

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

我在这里做错了什么？

【参考方案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 />;

【讨论】：

谢谢，我在 ReactKeycloakProvider 上遇到错误 - 如果我们围绕它包装整个应用程序，我不确定应该在哪里创建它。

实际上，我有这个工作 - 我可以在 ReactDom.render() 中初始化 ReactKeycloakProvider 这似乎工作。