[解決済み] Angular - すべてのリクエストにヘッダを設定する

質問

ユーザーがログインした後、それ以降のリクエストに対して、いくつかのAuthorizationヘッダを設定する必要があります。

特定のリクエストのヘッダーを設定する。

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

// HTTP POST using these headers
this.http.post(url, data, {
  headers: headers
})
// do something with the response

参照

しかし、この方法ですべてのリクエストに対してリクエストヘッダを手動で設定することは現実的ではないでしょう。

ユーザーがログインした後に設定されるヘッダーを設定し、またログアウト時にそのヘッダーを削除するにはどうすればよいですか？

どのように解決するのですか？

この質問に対する答えとして、オリジナルの Http オブジェクトを作成します。以下のようなものです。

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class HttpClient {

  constructor(private http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('username:password')); 
  }

  get(url) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(url, {
      headers: headers
    });
  }

  post(url, data) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

そして、インジェクションの代わりに Http オブジェクトを注入することができます。 HttpClient ).

import { HttpClient } from './http-client';

export class MyComponent {
  // Notice we inject "our" HttpClient here, naming it Http so it's easier
  constructor(http: HttpClient) {
    this.http = httpClient;
  }

  handleSomething() {
    this.http.post(url, data).subscribe(result => {
        // console.log( result );
    });
  }
}

また、マルチプロバイダを利用して Http を拡張した独自のクラスを提供することで Http というのがあるんですが... このリンクを参照してください。 http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html .