Interceptor Angular 4.3 - Ustawianie wielu nagłówków na klonowanym żądaniu

Question

Właśnie zauważyłem, że Header Object, który był możliwy do użycia w poprzednim żądaniu HTTP RequestsOption, nie jest już obsługiwane w nowym Interceptorze.

To new Interceptor logika:

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

mam teraz, dwa sposoby, aby dodać moje nagłówki w tym wniosku:

Przykład:

headers?: HttpHeaders; 

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

---

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

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

Jak mogę dodać wiele osób aders warunkowo na tę prośbę? samo co kiedyś zrobić z obiektem 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); 

Answer 1

Nowy klient HTTP współpracuje z nagłówków niezmienne sprzeciwu. Trzeba przechowywać odniesienie do poprzednich nagłówków mutować obiektu:

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

Zobacz Why HttpParams doesn't work in multiple line in angular 4.3 zrozumieć, dlaczego trzeba przechowywać odniesienie do zwracanej wartości.

To samo dla nagłówków:

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

Aby dowiedzieć się więcej na temat mechaniki za przechwytujących przeczytać:

• Insider’s guide into interceptors and HttpClient mechanics in Angular

Answer 2

kątowa 4.3+

wielodyskowym nagłówki w 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); 
    } 
} 

Answer 3

Mój kod pracował z poniższej podejścia do dołączania wielu nagłówków:

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