Keycloak登录成功后重定向至前端React应用问题

1. 自定义OAuth2登录成功重定向处理器 #

Spring Cloud Gateway默认的OAuth2登录成功后不会自动跳转到前端，需要自定义AuthenticationSuccessHandler来控制重定向逻辑：

import org.springframework.security.core.Authentication;
import org.springframework.security.oauth2.client.authentication.OAuth2AuthenticationToken;
import org.springframework.security.web.authentication.SimpleUrlAuthenticationSuccessHandler;
import org.springframework.stereotype.Component;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CustomOAuth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler {

    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {
        // 替换为你的React应用实际地址
        String frontendBaseUrl = "http://localhost:3000";
        String frontendRedirectUrl = frontendBaseUrl;
        
        // 可选：从请求参数获取前端目标路由，实现动态跳转
        String targetPath = request.getParameter("redirect_to");
        if (targetPath != null && !targetPath.isEmpty()) {
            frontendRedirectUrl = frontendBaseUrl + targetPath;
        }
        
        getRedirectStrategy().sendRedirect(request, response, frontendRedirectUrl);
    }
}

接着在Security配置中注册该处理器：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.reactive.EnableWebFluxSecurity;
import org.springframework.security.config.web.server.ServerHttpSecurity;
import org.springframework.security.web.server.SecurityWebFilterChain;

@Configuration
@EnableWebFluxSecurity
public class SecurityConfig {

    private final CustomOAuth2SuccessHandler successHandler;

    public SecurityConfig(CustomOAuth2SuccessHandler successHandler) {
        this.successHandler = successHandler;
    }

    @Bean
    public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http) {
        http
            .authorizeExchange(exchanges -> exchanges
                .pathMatchers("/login/**", "/oauth2/**").permitAll()
                .anyExchange().authenticated()
            )
            .oauth2Login(oauth2 -> oauth2
                .authenticationSuccessHandler(successHandler)
            );
        return http.build();
    }
}

2. 调整React登录方法（可选） #

如果需要登录后跳转到指定的前端路由，可以在跳转时携带目标路径参数：

login(targetPath: string = "/"): void {
    // 携带前端目标路由作为参数，供Gateway成功处理器使用
    const loginUrl = `${base_url}/oauth2/authorization/keycloak?redirect_to=${encodeURIComponent(targetPath)}`;
    window.location.href = loginUrl;
}

3. Keycloak客户端配置确认 #

确保Keycloak客户端的Valid Redirect URIs包含Gateway的回调地址（http://localhost:8080/login/oauth2/code/keycloak），无需添加前端地址，回调流程由Gateway处理后再重定向到前端。

核心逻辑说明 #

通过自定义登录成功处理器，覆盖Gateway默认的登录成功行为，强制将请求重定向到前端应用地址；若需要动态跳转，可通过请求参数传递前端目标路由，实现登录后回到用户原本想访问的页面。

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