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

Question

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

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

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

所以我的问题是：如何告诉 angular2 仅当用户登录时才使用用户凭据自动添加授权header？

感谢您的帮助

Answer 1

我想看看 Ben Nadel 做了什么 http://www.bennadel.com/blog/3047-creating-specialized-http-clients-in-angular-2-beta-8.htm (or the typescript version by 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 编写的，但它们非常有用。

下面是我的"solution"。它有效，但我对此并不满意：

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 在本地存储中可用，它会将身份验证 header 添加到 get/post 请求

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

然后通过

添加到请求中

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

希望对您有所帮助...

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

angular2 authenticate to spring http basic auth with end user credentials

security

spring

http-authentication

angular