create - Interceptor Angular 4.3-Establecer múltiples encabezados en la solicitud clonada

http interceptor angular 7

Question

Acabo de darme cuenta de que el nuevo Interceptor ya no admite el objeto de encabezado que fue posible usar en la solicitud de solicitud HTTP anterior.

Es la nueva lógica del 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)});

Ahora tengo dos formas de agregar mis encabezados en esta solicitud:

Ejemplo:

headers?: HttpHeaders;
headers: req.headers.set(''token1'', ''asd'')

setHeaders?: {
[name: string]: string | string[];
};
setHeaders: {
''token1'': ''asd'',
''token2'': ''lol''
}

¿Cómo puedo agregar múltiples encabezados condicionalmente en esta solicitud? Igual a lo que solía hacer con el objeto de encabezado:

 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);

Answer 1

El nuevo cliente HTTP trabaja con encabezados inmutables objeto. Debe almacenar una referencia a los encabezados anteriores para mutar el objeto:

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

Vea Por qué HttpParams no funciona en varias líneas en el ángulo 4.3 para comprender por qué necesita almacenar la referencia al valor devuelto.

Es lo mismo para los encabezados:

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;
}

Para aprender más sobre la mecánica detrás de los interceptores, lea:

• Guía de información privilegiada sobre los interceptores y la mecánica HttpClient en Angular

Answer 2

Mi código funcionó con el siguiente enfoque para agregar nuevos encabezados para reemplazar valores anteriores por nuevos valores:

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

Answer 3

Para adjuntar al encabezado existente de una solicitud clonada (como en un Interceptor HTTP), el siguiente código funciona (usando Angular 5.x). En el caso siguiente, se agrega al encabezado existente (que en mi caso incluye la cookie XSRF-TOKEN incluida automáticamente por Angular) con un token de autorización JWT almacenado en sessionStorage:

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);
}
}

Answer 4

Angular 4.3+

Establecer múltiples cabeceras en 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);
}
}