使用Spring Security无法移除用户凭证弹窗问题求助

问题根源 #

HTTP Basic认证机制下，当服务器返回401 Unauthorized响应时，会自动添加WWW-Authenticate: Basic响应头，浏览器识别到这个头后就会弹出默认的用户名密码输入框。要跳转到自定义Angular登录页，必须阻止这个响应头的发送，并让前端接管未认证的处理逻辑。

解决方案步骤 #

1. 自定义AuthenticationEntryPoint，禁用浏览器弹窗 #

创建一个自定义的认证入口类，替换Spring Security默认的Basic认证入口，不发送WWW-Authenticate头：

@Component
public class CustomAuthEntryPoint implements AuthenticationEntryPoint {
    @Override
    public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException {
        // 返回401状态码，但不添加Basic认证头，同时返回自定义提示信息
        response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().write("{\"code\":401,\"msg\":\"请先登录系统\"}");
    }
}

2. 修改SecurityConfig配置 #

在你的SecurityConfig.java中，注入自定义的入口类，替换默认的HTTP Basic认证入口，同时配置允许访问的公开资源（比如Angular登录页、静态资源）：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private CustomAuthEntryPoint customAuthEntryPoint;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable() // 前后端分离场景下可先禁用CSRF，后续可根据Angular的CSRF机制配置适配
            .authorizeRequests()
                // 允许访问Angular的登录页、静态资源和公开API
                .antMatchers("/", "/index.html", "/login", "/assets/**", "/api/public/**").permitAll()
                // 其他所有请求需要认证
                .anyRequest().authenticated()
            .and()
            .httpBasic()
                // 使用自定义的认证入口，彻底避免浏览器触发默认弹窗
                .authenticationEntryPoint(customAuthEntryPoint);
    }

    // 配置用户认证（示例为内存用户，生产环境请替换为数据库查询认证）
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
            .withUser("test")
            // Spring Security 4中密码需指定加密方式，{noop}表示明文（仅测试用，生产务必替换为BCrypt等加密）
            .password("{noop}123456")
            .roles("USER");
    }
}

3. Angular端添加HTTP拦截器，处理未认证跳转 #

创建Angular的HTTP拦截器，捕获后端返回的401响应，自动跳转到自定义登录页：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private router: Router) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 捕获401未认证响应，立即跳转到自定义登录页
        if (error.status === 401) {
          this.router.navigate(['/login']);
        }
        return throwError(error);
      })
    );
  }
}

然后在AppModule中注册这个拦截器，让所有HTTP请求都经过它处理：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  // ...其他模块配置项
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

4. 补充：适配前后端分离的登录逻辑 #

• 确保Angular的路由中配置了/login路径对应的登录组件，比如：

  const routes: Routes = [
    { path: 'login', component: LoginComponent },
    // ...其他路由
  ];
  

• 如果需要保留HTTP Basic认证的API访问逻辑，前端登录成功后，可将用户名密码编码后存入本地存储，后续请求自动携带认证头：

  // 登录成功时生成Basic认证头
  const credentials = btoa(`${username}:${password}`);
  localStorage.setItem('authToken', `Basic ${credentials}`);
  

  然后在HTTP拦截器中添加自动携带头的逻辑：

  const authToken = localStorage.getItem('authToken');
  if (authToken) {
    request = request.clone({
      setHeaders: {
        Authorization: authToken
      }
    });
  }
  

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