时间戳

首页 > 解决方案 > 拦截器中的 axois react-keycloak/web 令牌

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

问题描述

我正在尝试将请求拦截器与 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 副本

我在这里做错了什么？

标签： javascriptreactjskeycloak

解决方案

你不能在反应树中使用反应钩子。

您可以导出 axoios 实例并将其导入反应内部的其他地方（例如：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 />;
}

推荐阅读