Angular 4+Spring Boot+Spring Security：浏览器认证弹窗问题排查

我之前也碰到过一模一样的情况，你看到的这个浏览器自带的认证弹窗是HTTP Basic Authentication的默认行为，根源基本在Spring Security的配置上，和Angular的关系不大。咱们一步步拆解问题和解决办法：

为什么会弹出这个窗口？ #

默认情况下，Spring Security如果没找到自定义的认证入口配置，或者请求未携带有效认证信息时，会使用BasicAuthenticationEntryPoint，它会给浏览器返回WWW-Authenticate: Basic响应头，浏览器识别到这个头就会自动弹出系统级的认证窗口——这就是你现在遇到的情况。

具体解决步骤 #

1. 检查并移除Spring Security中的httpBasic()配置 #

先看你的WebSecurityConfiguration里的configure(HttpSecurity http)方法，如果里面有http.httpBasic()这行代码，直接删掉！这行是显式启用Basic Auth的开关，留着它就会触发弹窗。

2. 配置自定义表单登录与认证入口 #

你已经有Angular的登录界面了，所以需要让Spring Security接受前端的登录请求，并且在未认证时返回JSON提示（而不是触发Basic Auth）。修改你的configure(HttpSecurity http)方法如下：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        // Angular通常会处理CSRF，这里如果前端没配置可以先禁用，或者后续配置CSRF令牌
        .csrf(csrf -> csrf.disable())
        // 配置请求权限
        .authorizeHttpRequests(auth -> auth
            // 允许访问Angular的登录页面、静态资源和根路径
            .requestMatchers("/login", "/assets/**", "/").permitAll()
            // 其他所有请求都需要认证
            .anyRequest().authenticated()
        )
        // 配置表单登录，对接前端的登录请求
        .formLogin(form -> form
            // 前端登录请求要POST到这个接口
            .loginProcessingUrl("/api/auth/login")
            // 对应前端表单的用户名字段名（和Angular表单里的name一致）
            .usernameParameter("username")
            // 对应前端表单的密码字段名
            .passwordParameter("password")
            // 登录成功后返回JSON响应，不要跳转页面
            .successHandler((request, response, authentication) -> {
                response.setContentType("application/json");
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write("{\"status\":\"success\",\"message\":\"登录成功\"}");
            })
            // 登录失败返回JSON响应
            .failureHandler((request, response, exception) -> {
                response.setContentType("application/json");
                response.setCharacterEncoding("UTF-8");
                response.setStatus(HttpStatus.UNAUTHORIZED.value());
                response.getWriter().write("{\"status\":\"error\",\"message\":\"用户名或密码错误\"}");
            })
        )
        // 配置退出登录
        .logout(logout -> logout
            .logoutUrl("/api/auth/logout")
            .logoutSuccessHandler((request, response, authentication) -> {
                response.setContentType("application/json");
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write("{\"status\":\"success\",\"message\":\"退出成功\"}");
            })
        )
        // 替换默认的认证入口，避免触发Basic Auth
        .exceptionHandling(ex -> ex
            .authenticationEntryPoint((request, response, authException) -> {
                // 未认证时返回401 JSON提示，而不是发送Basic Auth头
                response.setContentType("application/json");
                response.setCharacterEncoding("UTF-8");
                response.setStatus(HttpStatus.UNAUTHORIZED.value());
                response.getWriter().write("{\"status\":\"error\",\"message\":\"请先登录\"}");
            })
        );
}

3. 确认LDAP配置正确 #

确保你的LDAP认证逻辑没问题，比如configure(AuthenticationManagerBuilder auth)里的配置要和你的AD服务器匹配：

@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth
        .ldapAuthentication()
        // AD的用户DN模式，根据你的实际AD结构调整
        .userDnPatterns("uid={0},ou=users")
        // AD的组搜索路径
        .groupSearchBase("ou=groups")
        // AD服务器的连接地址
        .contextSource().url("ldap://your-ad-server:389/dc=your-domain,dc=com")
        .and()
        // 密码比对配置，AD如果用明文可以换成NoOpPasswordEncoder，不过生产环境建议用对应加密方式
        .passwordCompare()
        .passwordEncoder(new BCryptPasswordEncoder())
        .passwordAttribute("userPassword");
}

4. 前端Angular的配合 #

确保你的Angular登录组件是通过POST请求把用户名和密码提交到/api/auth/login接口，比如用HttpClient：

login(username: string, password: string): Observable<any> {
  const formData = new FormData();
  formData.append('username', username);
  formData.append('password', password);
  return this.http.post('/api/auth/login', formData);
}

另外，如果Angular和Spring不在同一个端口，别忘了在Spring里配置CORS，避免跨域请求被拦截导致认证逻辑异常。

最后检查点 #

• 确认Spring配置里没有httpBasic()；
• 确认authenticationEntryPoint已经替换成自定义的JSON响应处理器；
• 前端登录请求的URL和参数名和Spring配置的一致。

按照上面的步骤调整后，浏览器就不会再弹出系统认证窗口，而是用你自己开发的Angular登录界面来处理认证了。

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