无法使用 Angular 2 作为前端并使用基本 Http 身份验证获取有关 Spring 安全性的登录详细信息

Posted 2023-02-27

【中文标题】无法使用 Angular 2 作为前端并使用基本 Http 身份验证获取有关 Spring 安全性的登录详细信息

【英文标题】：Unable to get login details on Spring security with Angular 2 as front end and using Basic Http Authentication

【发布时间】：2016-08-25 00:45:53

【问题描述】：

我使用 Spring 作为我的后端，使用 Angular 2.0.0-beta.15 作为我的 Web 应用程序的前端。现在我正在尝试登录，下面是我的前端代码。我在 userAccount 中传递详细信息，并且从组件调用此函数。我成功地在下面的函数中获取了登录详细信息。

authenticate(userAccount) 
    var headers = new Headers();
    headers.append('Authorization', 'Basic ' + btoa(userAccount.username + ':' + userAccount.password));
    headers.append('X-Requested-With', 'XMLHttpRequest');
    return this.http.get('/authenticate', headers: headers).map(this.extractData).catch(this.handleError);

我的 spring 安全文件包含以下信息。

@Autowired
protected void configureGlobal(AuthenticationManagerBuilder auth) throws Exception
    auth.userDetailsService(customUserDetailsService).passwordEncoder(passwordEncoder);

@Configuration
public static class UserSecurityConfig extends WebSecurityConfigurerAdapter
@Override
    public void configure(WebSecurity web) throws Exception
        web
            .ignoring()
                .antMatchers("/front-end/**");
    
 @Override
    protected void configure(HttpSecurity http) throws Exception
 http
            .requestMatchers()
                .antMatchers("/**","/login")
                .and()
                .httpBasic().and().authorizeRequests()
                .antMatchers("/login").permitAll()
                .antMatchers("/angular2/**").permitAll()
                .antMatchers("/node_modules/**").permitAll()
                .antMatchers("/**").access("hasRole('" + ROLE_EMPLOYEE + "') or hasRole('" + ROLE_ADMIN + "') ")
                .and()
                    .exceptionHandling().authenticationEntryPoint(restAuthenticationEntryPoint()).accessDeniedHandler(customAccessDeniedHandler())
                .and()
                    .rememberMe().tokenRepository(persistentTokenRepository()).tokenValiditySeconds(REMEMBER_ME_TOKEN_EXPIRATION).and().csrf()
                    .csrfTokenRepository(csrfTokenRepository()).and()
                    .addFilterAfter(csrfHeaderFilter(), CsrfFilter.class);;

    

现在，当我尝试使用有效凭据登录时，我在 customUserDetailsS​​ervice 内的后端将“未定义”作为我的用户名。因此，请求将以 401 未授权结束。有人可以指导我可能是什么问题吗？

【参考方案1】：

这是角度方面的问题。 btoa 函数返回错误的用户名和密码。休息一切都很好。