React+ASP.NET Core OpenAPI项目中Keycloak与Swagger客户端整合遇阻求助

问题分析 #

从你的代码中能看到两个核心问题：

1. OpenAPI配置里直接把getToken函数赋值给accessToken，但OpenAPI生成的客户端需要的是字符串类型的token值，不是函数引用。
2. Keycloak认证是异步过程，组件挂载时直接发起API请求，可能在token还没就绪时就发送无权限请求，导致401错误。

修复方案 #

1. 调整OpenAPI配置，动态注入Token

修改React测试代码，用OpenAPI拦截器动态获取并注入token，同时处理token过期刷新：

import KeyCloakService from './KeyCloakService';

const openapiConfig = new Configuration();
openapiConfig.basePath = "https://localhost:44387";

// 添加请求拦截器，自动注入token并处理刷新
openapiConfig.interceptors.request.use(async (config) => {
  // 确保token有效，过期自动刷新
  await KeyCloakService.UpdateToken(() => {});
  
  if (KeyCloakService.IsLoggedIn()) {
    config.headers.Authorization = `Bearer ${KeyCloakService.GetToken()}`;
  }
  return config;
});

const WeatherTable: React.FC = () => {
    const openApi = new WeatherForecastApi(openapiConfig);
    const [items, setItems] = useState<Array<WeatherForecast>>([]);
    
    const fetchForecasts = async () => {
        try {
            const response = await openApi.getWeatherForecast();
            setItems(response.data);
        } catch (error) {
            console.log(error);
        }
    };

    // 等待Keycloak认证完成后再发起请求
    useEffect(() => {
        const initAndFetch = async () => {
            await KeyCloakService.CallLogin(() => {
                fetchForecasts();
            });
        };
        initAndFetch();
    }, []);

    return (
        <Table>
            <tbody>
                {items && items.map((item, index) => (
                    <tr key={index}>
                        <td>{index}</td>
                        <td>{FormatDate(item.date)}</td>
                    </tr>
                ))}
            </tbody>
        </Table>
    );
};

2. 修正KeycloakService中的Logout方法

原代码返回的是函数引用，改为直接调用：

// 原代码
const Logout = () => keycloakInstance.logout;
// 修改后
const Logout = () => keycloakInstance.logout();

3. 确保Keycloak初始化完成后再渲染组件

在App根组件中处理认证逻辑，完成后再渲染页面内容，避免子组件提前发起请求：

// App.tsx
import KeyCloakService from './KeyCloakService';
import { useState, useEffect } from 'react';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    KeyCloakService.CallLogin(() => {
      setIsAuthenticated(true);
    });
  }, []);

  if (!isAuthenticated) {
    return <div>正在登录...</div>;
  }

  return <WeatherTable />;
}

export default App;

关键说明 #

• 用OpenAPI拦截器可以统一处理所有请求的token注入，减少重复代码。
• 每次请求前调用UpdateToken确保token未过期，过期时会自动跳转到Keycloak登录页。
• 等待认证完成后再发起API请求，从根源避免未授权请求。

内容的提问来源于stack exchange，提问作者Bas Visscher