Question

我有一堆由Spring Boot提供支持的REST Web服务。这些Web服务受基本http身份验证保护。

我尝试创建一个Angular2前端，在另一台服务器上托管。我希望前端使用前端用户提供的凭据与弹簧引导后端进行交互。

现在，用户可以通过angular2前端登录，但是，即使用户进行身份验证，每次对后端的调用都需要进行身份验证，这是正常的。

所以我的问题是：如何告诉angular2仅在用户登录时自动添加授权标头和用户凭据？

感谢您的帮助

Answer 1

我想看看Ben Nadel做了什么http://www.bennadel.com/blog/3047-creating-specialized-http-clients-in-angular-2-beta-8.htm（或Sam Storie https://blog.sstorie.com/adapting-ben-nadels-apigateway-to-pure-typescript/的打字稿版本）。我还没有机会在应用程序中使用它，但它看起来很有希望。

另外，如果你还没有，我会看看Dave Syer的Spring Boot和AngularJS教程（https://spring.io/guides/tutorials/spring-security-and-angular-js/）。它们是为Angular 1编写的，但它们非常有用。

以下是我的“解决方案”。它有效，但我并不高兴：

<强> main.ts ：

import { CsrfBaseRequestOptions } from './app/shared';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  ...
  provide(RequestOptions, { useClass: CsrfBaseRequestOptions })
]);

<强> XhrBaseRequestOptions ：

@Injectable()
export class XhrBaseRequestOptions extends BaseRequestOptions {

  constructor() {
    super();

    this.headers.append('X-Requested-With', 'XMLHttpRequest');
  }

}

<强> CsrfBaseRequestOptions ：

import { Injectable } from '@angular/core';
import { XhrBaseRequestOptions } from './xhr-base-request-options';

@Injectable()
export class CsrfBaseRequestOptions extends XhrBaseRequestOptions {

  constructor() {
    super();

    let csrfToken = this.getCsrfToken('X-CSRF-TOKEN');
    if (csrfToken) {
      this.headers.append('X-CSRF-TOKEN', csrfToken);
    }
  }

  getCsrfToken(tokenName:string):string {
    let tokenNameEQ = tokenName + '=';
    let ck = document.cookie;
    let ca = ck.split(';');

    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(tokenNameEQ) === 0) return c.substring(tokenNameEQ.length, c.length);
    }
    return null;
  }

}

Answer 2

我们有类似的情况，并使用自定义服务来处理auth-header。

该服务注入了Http，如果JWT在localstorage中可用，则将auth标头添加到get / post请求

let authHeader = new Headers();
authHeader.append('Authorization', 'Bearer ' + jwt);

然后通过

将其添加到请求中

this.http.get(url, { headers: authHeader });

希望有帮助...

angular2使用最终用户凭据对spring http basic进行身份验证

2 个答案: