如何将凭据从 Angular 前端传递到 Spring 后端（Spring Security 的基本身份验证）

Question

我正在开发一个使用 spring 作为后端和 angular2 作为前端的应用程序，后端是安全的（使用 Spring security），当我运行它时，我有默认的登录表单。我想从客户端登录到服务器端，但是当我尝试传递凭据时，浏览器控制台中出现这些错误

配置类

@Configuration
@EnableWebSecurity

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication().withUser("admin").password("admin").roles("ADMIN", "USER").and().withUser("user")
                .password("user").roles("USER");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http
        .csrf().disable()
        .authorizeRequests()
        .antMatchers("/etudiant/list").hasRole("ADMIN")
            .anyRequest().authenticated()
            .and()
        .formLogin()
        .and()
        .httpBasic();
    }

}

web.xml 中的安全过滤器：

<filter>
    <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>
        org.springframework.web.filter.DelegatingFilterProxy
        </filter-class>
  </filter>
  <filter-mapping>
    <filter-name>springSecurityFilterChain</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

angular2端的登录表单：

<div class="login jumbotron center-block">
   <h1>Login</h1>
   <form role="form" (submit)="login(username.value, password.value)">
   <div class="form-group">
     <label for="username">Username</label>
     <input type="text" #username class="form-control" id="username" placeholder="Username">
   </div>
   <div class="form-group">
     <label for="password">Password</label>
     <input type="password" #password class="form-control" id="password" placeholder="Password">
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
 </div>

Answer 1

我将使用表单调用的以下方法创建一个@Injectable()AuthService。

login(usercreds) {
  const headers = new Headers();
  const creds = 'name=' + usercreds.username + '&password=' + usercreds.password;

  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  return new Promise((resolve) => {
    this.http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => {
        if (data.json().success) {
          // window.localStorage.setItem('auth_key', data.json().token);
          this.userId = data.json().userId;
          this.isAuthenticated = true;
        }
        resolve(this.isAuthenticated);
     });
  });
}

不要忘记在app.module.ts 文件中将此组件声明为提供者