Angular4.0+Spring Boot集成Spring Security：无法解析login模板报错

我之前也碰到过一模一样的情况，咱们一步步拆解问题、解决它：

问题根源 #

你现在的核心矛盾是：Spring Boot的控制器或Spring Security配置还在试图渲染名为login的模板文件，但你已经把src/main/resources/templates下的login.html移除了。毕竟之前用传统模板页时，控制器返回"login"视图名会让Thymeleaf自动去templates目录找对应文件，现在换成Angular组件，这套逻辑自然就失效了。

具体解决方案 #

1. 调整LoginController的返回逻辑 #

根据你的部署方式（前后端同包/分离），选择对应的处理方式：

• 前后端分离部署（Angular单独跑在4200端口）：
  控制器不需要返回模板，直接重定向到Angular的登录页即可：

  @GetMapping("/")
  public String redirectToAngularLogin() {
      // 替换成你的Angular登录页实际地址
      return "redirect:http://localhost:4200/login";
  }
  

• 前后端同包部署（Angular打包后放到Spring Boot的static目录）：
  让控制器转发到Angular的入口文件index.html，交给Angular路由处理登录页：

  @GetMapping({"/", "/login"})
  public String serveAngularApp() {
      // 让Spring Boot转发到静态资源里的Angular入口
      return "forward:/index.html";
  }
  

  记得要在Angular路由里配置/login路径对应的登录组件。

2. 重新配置Spring Security适配Angular登录 #

现在用Angular组件当登录页，得告诉Spring Security别再用默认的模板登录页，而是接受前端发送的登录请求：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
            .anyRequest().authenticated()
            .and()
        .formLogin()
            // 指定登录页的访问路径（同包部署就是/login，分离部署可以写Angular的URL）
            .loginPage("/login")
            // 专门处理登录请求的API路径（让Angular表单提交到这里）
            .loginProcessingUrl("/api/login")
            // 登录成功后的跳转（分离部署可以返回JSON，这里示例是同包跳转）
            .defaultSuccessUrl("/dashboard")
            .permitAll()
            .and()
        .logout()
            .permitAll();
}

如果是前后端分离跨域的情况，还要添加CORS配置允许Angular域名访问：

@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:4200"); // 你的Angular服务地址
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

3. 让Angular登录组件正确发送请求 #

在Angular的登录组件里，写表单提交逻辑，向Spring Security的/api/login发送POST请求：

onLogin(form: NgForm) {
    const loginData = {
        username: form.value.username,
        password: form.value.password
    };
    this.http.post('/api/login', loginData, { withCredentials: true })
        .subscribe(
            () => this.router.navigate(['/dashboard']), // 登录成功跳主页
            error => console.error('登录失败:', error)
        );
}

注意开启withCredentials: true，这样会话Cookie才能正确传递，维持登录状态。

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