☰

Angular - すべてのリクエストにヘッダーを設定する 質問する

tag-icon • tag-icon angular
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

参照

しかし、このようにすべてのリクエストに対してリクエスト ヘッダーを手動で設定するのは現実的ではありません。

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

ベストアンサー1

質問に答えるには、Angular から元のオブジェクトをラップするサービスを提供できるはずです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。

おすすめ記事