如何在Spring Boot+React开发者门户中自动授权Swagger UI页面？

针对你的场景，完全可以实现会话自动传递，让开发者无需手动点击“Authorize”按钮即可调试接口，以下是适配Spring Boot 2.7 + Open API 3.0 + React技术栈的具体方案：

后端配置（Spring Boot + Springdoc OpenAPI） #

Spring Boot 2.7搭配OpenAPI 3.0通常使用springdoc-openapi-ui依赖，我们可以通过自定义配置让Swagger UI自动注入认证信息：

1. 确保依赖正确 #

<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-ui</artifactId>
    <version>1.6.14</version> <!-- 适配Spring Boot 2.7的稳定版本 -->
</dependency>

2. 基于JWT令牌的自动注入 #

如果你的系统用JWT做认证，可通过配置类从请求头获取令牌，自动设置给Swagger UI：

import org.springdoc.core.SwaggerUiConfigParameters;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

@Configuration
public class SwaggerAuthAutoConfig {
    public SwaggerAuthAutoConfig(SwaggerUiConfigParameters swaggerUiConfigParameters) {
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        if (attributes != null) {
            // 从当前请求头获取Authorization令牌
            String authToken = attributes.getRequest().getHeader("Authorization");
            if (authToken != null && !authToken.isBlank()) {
                // 给Swagger UI设置默认授权头，匹配你的认证规则
                swaggerUiConfigParameters.addAuthorization("BearerAuth", authToken);
            }
        }
    }
}

3. 基于Session会话的自动注入 #

如果是Session认证，只要Swagger UI和React应用同域，浏览器会自动携带会话Cookie，只需配置Swagger识别Cookie认证：

import io.swagger.v3.oas.models.Components;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.security.SecurityScheme;
import org.springdoc.core.customizers.OpenApiCustomiser;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class OpenApiConfig {
    @Bean
    public OpenApiCustomiser sessionAuthCustomiser() {
        return openApi -> openApi.getComponents()
                .addSecuritySchemes("sessionAuth", new SecurityScheme()
                        .type(SecurityScheme.Type.APIKEY)
                        .in(SecurityScheme.In.COOKIE)
                        .name("SESSIONID")); // 替换为你的会话Cookie名称
    }
}

前端处理（React） #

根据部署场景的不同，前端传递会话的方式略有区别：

1. 同域部署场景 #

如果React应用和Swagger UI部署在同一域名下，直接通过window.open打开Swagger地址即可，浏览器会自动携带当前会话的Cookie，无需额外处理：

const openSwaggerPage = () => {
    window.open('/swagger-ui/index.html', '_blank');
};

2. 跨域部署场景 #

若为跨域，可将用户的JWT令牌通过URL参数传递给Swagger页面，再由后端配置获取并注入：

• React端代码：

const openSwaggerPage = () => {
    // 从本地存储或全局状态中获取用户的JWT令牌
    const authToken = localStorage.getItem('userAuthToken');
    // 拼接Swagger地址，带上token参数
    const swaggerUrl = `http://your-swagger-domain/swagger-ui/index.html?token=${authToken}`;
    window.open(swaggerUrl, '_blank');
};

• 对应后端修改配置类，从URL参数获取令牌：

import org.springdoc.core.SwaggerUiConfigParameters;
import org.springframework.context.annotation.Configuration;
import javax.servlet.http.HttpServletRequest;

@Configuration
public class SwaggerAuthAutoConfig {
    public SwaggerAuthAutoConfig(SwaggerUiConfigParameters swaggerUiConfigParameters, HttpServletRequest request) {
        String token = request.getParameter("token");
        if (token != null && !token.isBlank()) {
            swaggerUiConfigParameters.addAuthorization("BearerAuth", "Bearer " + token);
        }
    }
}

验证步骤 #

1. 开发者登录React应用后，点击打开Swagger页面的按钮。
2. 进入Swagger页面后，直接调用需要授权的接口，检查请求头是否自动携带了认证信息（JWT令牌或会话Cookie），无需手动点击“Authorize”按钮。

内容的提问来源于stack exchange，提问作者Happy Coder