Angular+Spring Boot OAuth2客户端会话超时自动登出实现问题

你的场景是Spring Security OAuth2客户端 + Angular SPA，尝试通过invalidSessionUrl实现会话超时自动登出，但出现了AJAX请求被强制跳转到登出页而非返回JSON的问题。这种方式并不适用于SPA架构，以下是具体分析和修正方案：

为什么原方案不可行？ #

invalidSessionUrl是Spring Security针对传统服务端渲染场景设计的，它会对所有会话失效的请求执行无条件重定向。但Angular作为SPA，大部分请求是AJAX（XHR/Fetch），前端期望接收JSON格式的响应而非3xx重定向，直接跳转登出页会破坏SPA的交互流程。

正确实现思路 #

需要区分AJAX请求和普通页面请求：

• 对于AJAX请求：返回401 Unauthorized状态码+JSON提示，让Angular前端主动触发登出流程
• 对于普通页面请求：保持重定向到认证服务器登出地址的逻辑

具体代码实现 #

1. 自定义Session失效处理器

创建一个InvalidSessionStrategy的实现类，根据请求类型做不同处理：

@Component
public class CustomInvalidSessionStrategy implements InvalidSessionStrategy {

    private final String logoutUri;

    public CustomInvalidSessionStrategy(@Value("${spring.security.oauth2.client.registration.test.logout-uri}") String logoutUri) {
        this.logoutUri = logoutUri;
    }

    @Override
    public void onInvalidSessionDetected(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 判断是否为AJAX请求
        boolean isAjax = "XMLHttpRequest".equals(request.getHeader("X-Requested-With"))
                || (request.getHeader("Accept") != null && request.getHeader("Accept").contains("application/json"));

        if (isAjax) {
            // 给前端返回401状态码和JSON提示
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.setContentType("application/json");
            response.getWriter().write("{\"code\":401,\"msg\":\"会话已过期，请重新登录\"}");
        } else {
            // 普通页面请求重定向到登出地址
            response.sendRedirect(logoutUri);
        }
    }
}

2. 更新SecurityFilterChain配置

替换原有的invalidSessionUrl，使用自定义的处理器：

@Bean
public SecurityFilterChain filterChain(HttpSecurity http, CustomInvalidSessionStrategy invalidSessionStrategy) throws Exception {
    http
        .headers(headersConfig ->
            headersConfig.frameOptions(HeadersConfigurer.FrameOptionsConfig::sameOrigin)
        )
        .sessionManagement(sessionConfig ->
            sessionConfig.invalidSessionStrategy(invalidSessionStrategy)
        )
        .authorizeHttpRequests(authorize -> authorize.anyRequest().authenticated())
        .oauth2Login(oauth2Config ->
            oauth2Config.authorizationEndpoint(authorizationEndpointConfig ->
                authorizationEndpointConfig.authorizationRequestResolver(authorizationRequestResolver(clientRegistrationRepository))
            )
        )
        .csrf(csrfConfig -> csrfConfig.disable());

    return http.build();
}

3. Angular前端拦截401响应

创建HTTP拦截器，捕获401状态码并触发登出跳转：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<any> {
        return next.handle(req).pipe(
            catchError((error: HttpErrorResponse) => {
                if (error.status === 401) {
                    // 跳转到认证服务器登出地址
                    window.location.href = 'http://localhost:8080/authserver/logout?redirect_uri=http://localhost:8080/test&client_id=test';
                }
                return throwError(() => error);
            })
        );
    }
}

关键说明 #

• SPA应用的会话超时处理必须前后端配合，后端负责识别会话状态并返回标准状态码，前端负责根据状态码执行对应的页面跳转逻辑
• 避免直接对AJAX请求做重定向，这会破坏SPA的异步请求流程

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