Angular2，ionic2，Spring security：“code”：“401”，“message”：“访问此资源需要完全身份验证”

Question

我正在尝试为我正在开发的移动应用程序进行登录身份验证

Angular2（最终版）、rc6 和 ionic2，使用 REST API。

我有 2 个 API，

一个用于发送登录ID和密码，

另一种是在认证成功时获取用户的用户详细信息。

我为此使用了 Spring Security。

我收到一条错误消息：“code”：“401”，“message”：“访问此资源需要完全身份验证”。

我知道 stackoverflow 上有很多基于此的帖子，但我无法使用它们，因为它们要么已被弃用，要么没有用 typescript 编写。而且所有这些帖子都基于单个 HTTP 调用，但我必须打 2 个电话。我不知道我哪里出错了。我知道这对我来说应该是一个非常简单的错误。

这是我从用户那里获取输入参数的 login.ts 页面。然后我打了两个 http 调用

1. 发送参数
2. 获取用户详细信息。

当用户通过身份验证并且该代码=200 时，会生成一个“代码”。我的程序在这里运行良好，但我仍然无法检索用户详细信息，因为我收到此错误。

 import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { FormBuilder, FormGroup, Validators, AbstractControl } from      '@angular/forms';
    import { checkFirstCharacterValidator } from '../Validators/customvalidator';
    import { EmailValidator } from  '../Validators/emailvalidator';
    import { Http, Headers, Response, RequestOptions, BaseRequestOptions } from '@angular/http';
    import { Observable } from 'rxjs/Observable';


    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/do';
    import 'rxjs/add/operator/catch';

    declare var sha256_digest: any;
    @Component({
      selector: 'page-login',
      templateUrl: 'login.html'
    })
    export class LoginPage 
    {
      loginform : FormGroup;
      constructor(public navCtrl: NavController, public navParams: NavParams, fb: FormBuilder,public http:Http) 
      {
        this.loginform = fb.group
        ({
          'email' : [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(40),checkFirstCharacterValidator(/^\d/),
                                      EmailValidator.isValidMailFormat])],
          'password': [null, Validators.compose([Validators.required, Validators.maxLength(25),])]
        })  
      }

        private extractData(res: Response) {
        let body = res.json();
        console.log(body);
        return body || {};
      }

      submitForm(value: any):void
      {
        console.log('Form submited!');
       value.password = sha256_digest(value.password);
        console.log(value);

           var userdata =
          {
            login:value.email,
            password:value.password
          };

          let headers = new Headers({'Content-Type': 'application/json'});  
          headers.append('Authorization','Basic ');
          let options = new RequestOptions({headers: headers});

          this.http.post('dummy/api/login',userdata,options).map(res=>res.json()).subscribe(resp=>
         {
              console.log(resp.data); 
              if(resp.code === 200)
               {
                  return this.http.get('dummy/api/auth/registration/success',options)
                  .subscribe(resp=>{
                  console.log(resp);
                });
               }
        },
        err=>{console.log(err);},
        ()=>{});

       }

      ionViewDidLoad() {
        console.log('ionViewDidLoad LoginPage');
      }

    }

我什至尝试过这个版本的标题：

    let headers = new Headers();
  headers.append("Authorization", "Basic " + btoa(userdata.login + ":" + userdata.password)); 
  headers.append("Content-Type", "application/x-www-form-urlencoded");

请帮我纠正这个错误。这些是我尝试过的所有来源：

Spring-Security-Oauth2: Full authentication is required to access this resource

401 full authentication is required to access this resource

Angular 2 Basic Authentication not working

Angular2/Http (POST) headers

Answer 1

我有同样的错误。除了一个之外，没有一个提议的解决方案对我有用。问题是我正在从位于另一个端口的 UI / 客户端访问我的后端服务，这不是整个 Spring（在我的情况下是微服务）设置的一部分。最后，这一切都归结为 CORS。

以下建议的解决方案必须在后端服务（使用 Spring Security）中实现，UI 或其他服务从另一个端口访问该服务。

希望对你有帮助！

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {

    Logger log = LoggerFactory.getLogger(this.getClass());

    @Override
    public void init(FilterConfig fc) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp,
                         FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) resp;
        HttpServletRequest request = (HttpServletRequest) req;
        // FIXME: this is a temp solution for CORS
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, resp);
        }

    }

    @Override
    public void destroy() {
    }

}