web-dev-qa-db-ja.com

Interceptor Angular 4.3-複製されたリクエストに複数のヘッダーを設定します

以前のHTTP RequestsOptionで使用できた Header Object は、新しいInterceptorではもうサポートされていないことに気付きました。

新しいインターセプター ロジックです：

// Get the auth header from the service.
const authHeader = this.auth.getAuthorizationHeader();
// Clone the request to add the new header.
const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)});

このリクエストにヘッダーを追加する方法は2つあります。

例：

headers?: HttpHeaders;

    headers: req.headers.set('token1', 'asd')

setHeaders?: {
   [name: string]: string | string[];
};

    setHeaders: {
             'token1': 'asd',
             'token2': 'lol'
    }

このリクエストに条件付きで複数のヘッダーを追加するにはどうすればよいですか？私がHeaderオブジェクトで行ったことと同じ：

 myLovellyHeaders(headers: Headers) {
    headers.set('token1', 'asd');
    headers.set('token2', 'lol');
     if (localStorage.getItem('token1')) {
     headers.set('token3', 'gosh');
     }
    }
    const headers = new Headers();
    this.myLovellyHeaders(headers);
angularheaderinterceptor
22
39ro

新しいHTTPクライアントは、不変のヘッダーオブジェクトで動作します。オブジェクトを変更するには、以前のヘッダーへの参照を保存する必要があります。

 myLovellyHeaders(headers: Headers) {
     let p = headers.set('token1', 'asd');   
     p = p.set('token2', 'lol');
     if (localStorage.getItem('token1')) {
        p = p.set('token3', 'gosh');
     }

なぜangular 4.3の複数行でHttpParamsが機能しないのか を参照して、戻り値への参照を保存する必要がある理由を理解してください。

ヘッダーについても同じです：

export class HttpHeaders {
  ...
  set(name: string, value: string|string[]): HttpHeaders {
    return this.clone({name, value, op: 's'});
  }

  private clone(update: Update): HttpHeaders {
    const clone = new HttpHeaders();
    clone.lazyInit =
        (!!this.lazyInit && this.lazyInit instanceof HttpHeaders) ? this.lazyInit : this;
    clone.lazyUpdate = (this.lazyUpdate || []).concat([update]);
    return clone;
  }

インターセプターの背後にあるメカニズムの詳細については、以下をお読みください。

9
Max Koretskyi aka Wizard

Angular 4.3 +

Interceptorでマルチヘッダーを設定します。

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

import {environment} from '../../../../environments/environment';

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

    const headers = new HttpHeaders({
      'Authorization': 'token 123',
      'WEB-API-key': environment.webApiKey,
      'Content-Type': 'application/json'
    });


    const cloneReq = req.clone({headers});

    return next.handle(cloneReq);
  }
}
15
non4me

私のコードは次のアプローチで機能し、新しいヘッダーを追加して以前の値を新しい値に置き換えました。

headers: req.headers.set('token1', 'asd')
.set('content_type', 'asd')
.set('accept', 'asd')
9
Enayat

（HTTPインターセプターのように）複製された要求の既存のヘッダーに追加するには、以下のコードが機能します（Angular 5.xを使用）。以下の場合、既存のヘッダー（私の場合は、Angularによって自動的に含まれるXSRF-TOKEN Cookieが含まれます）に、sessionStorageに格納されたJWT Authorizationトークンが追加されます。

export class TokenInterceptor implements HttpInterceptor {

    constructor() { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let headers = request.headers
            .set('Content-Type', 'application/json')
            .set('Authorization', `Bearer ${sessionStorage.getItem('authToken')}`);

        const cloneReq = request.clone({ headers });

        return next.handle(cloneReq);
    }
}
6
Alex