web-dev-qa-db-ja.com

Angular 5 HttpInterceptorに複数のヘッダーを追加する方法

HttpInterceptorを使用して、アプリがAPIに対して行う各HTTPリクエストにいくつかのヘッダーを追加する方法を学習しようとしています。私はこのインターセプターを持っています：

import { Injectable } from '@angular/core';

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';


@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}
}

'Content-Type'ヘッダーとは別に、'Authorization'を追加する必要がありますが、それを行う方法はありません（Angular HttpHeadersのドキュメントはメソッドのリストであり、説明）。

どうすればいいですか？ありがとう！

angularangular-http-interceptorsangular-httpclient
17
Fel
@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'my-auth-token'
    })
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}
25
axl-code

setメソッドは毎回headersオブジェクトを返すため、これを行うことができます。これにより、傍受したリクエストの元のヘッダーも保持されます。

const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
    .set('header2', 'header 2 value')
    .set('header3', 'header 3 value')
});
26
Ketan Patil

前述のように、受け入れられたメソッドはヘッダーをオーバーライドします。ヘッダーを追加するには、 APIドキュメント からのアプローチが好きです：

const authReq = req.clone({ setHeaders: { Authorization: authToken } });
8
vitalii-patsai
  const modifiedReq = req.clone({
      url: this.setUrl(req.url),
      headers: this.addExtraHeaders(req.headers)
    });

そして方法：

private addExtraHeaders(headers: HttpHeaders): HttpHeaders {
  headers = headers.append('myHeader', 'abcd');
  return headers;
}

メソッド.appendは、新しいHttpHeadersオブジェクトを作成し、myHeaderを追加して、新しいオブジェクトを返します。

このソリューションを使用すると、ヘッダーが上書きされないため、複数のインターセプターも使用できます。

3
Mihai

上記のソリューションは魅力的なものでした。行番号2のヘッダーに追加コールバックを割り当てることを忘れないでください！

1 private addExtraHeaders(headers: HttpHeaders): HttpHeaders {<br> 2 headers = headers.append('myHeader', 'abcd');<br> 3 return headers;<br> 4 } <br>

0
Manjiri Killedar