Angulaire 4 >
Vous pouvez soit choisir de définir les en-têtes manuellement, ou de faire une HTTP intercepteur.
Conditions préalables pour Angulaires <4.3:
Assurez-vous d'utiliser @angular/common/http tout au long de votre application (ce que cela a changé dans Angulaire 4.3).
Manuellement
Le HttpHeaders classe est immuable, de sorte que chaque set() retourne une nouvelle instance et applique les changements.
À partir de l'angle de docs.
La fixation d'un en-tête:
http
.post('/api/items/add', body, {
headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
})
.subscribe();
La définition de plusieurs en-têtes:
this.http
.post('api/items/add', body, {
headers: new HttpHeaders({
'Authorization': 'my-auth-token',
'x-header': 'x-value'
})
}).subscribe()
Variable locale (immuable instancier nouveau)
let headers = new HttpHeaders().set('header-name', 'header-value');
headers = headers.set('header-name-2', 'header-value-2');
this.http
.post('api/items/add', body, { headers: headers })
.subscribe()
HTTP intercepteur
L'une des caractéristiques majeures de @angulaire/common/http est l'interception, la possibilité de déclarer des intercepteurs qui siègent dans l'entre votre application et le backend. Lorsque votre application effectue une demande, les intercepteurs de la transformer avant de les envoyer au serveur, et les intercepteurs peuvent transformer la réponse sur son chemin de retour avant que votre demande ne la voit. C'est utile pour tout, de l'authentification à la connexion.
À partir de l'angle de docs.
Assurez-vous d'utiliser @angular/common/http tout au long de votre application. De cette façon, votre demande sera exercé par l'intercepteur.
Étape 1 créer le service:
import * as lskeys from './../localstorage.items';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (true) { // e.g. if token exists, otherwise use incomming request.
return next.handle(req.clone({
setHeaders: {
'AuthenticationToken': localStorage.getItem('TOKEN'),
'Tenant': localStorage.getItem('TENANT')
}
}));
}
else {
return next.handle(req);
}
}
}
L'étape 2, l'ajouter à votre module:
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: HeaderInterceptor,
multi: true // Add this line when using multiple interceptors.
},
// ...
]
Liens utiles:
