Angular httpclient authorization header bearer

Angular 5 HttpInterceptor - Ajouter un jeton porteur aux requêtes HttpClient

Dans cet article, je vais décrire comment ajouter un jeton porteur d’authentification HTTP à chaque requête effectuée à partir d’Angular via HttpClient en implémentant un HttpInterceptor Angular 5 . De cette façon, le jeton porteur n’a pas été ajouté à chaque requête séparément lors de l’exécution d’une requête Ajax, par exemple à une API REST. C’est par exemple utile, si vous avez une API protégée par OAuth et que vous devez envoyer un jeton JWT pour y accéder.

HttpInterceptor :

Voici le code du HttpInterceptor lui-même. Il doit implémenter l’interface HttpInterceptor et donc fournir une implémentation pour la méthode d’interception.

import{Observable}from’rxjs/Observable' ;

import{Location}from'@angular/common' ;

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

import{HttpInterceptor}from'@angular/common/http' ;

import{HttpRequest}from'@angular/common/http' ;

import{HttpHandler}from'@angular/common/http' ;

import{HttpEvent}from'@angular/common/http' ;

import{MsalService}de'.. /services/msal.service' ;

import{HttpHeaders}from'@angular/common/http' ;

import’rxjs/add/observable/fromPromise' ;

exportclassCustomHttpInterceptorimplementsHttpInterceptor{

constructor(privatemsalService :MsalService){}

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

returnObservable.fromPromise(this.handleAccess(request,next)) ;

privateasync handleAccess(request :HttpRequest<any>,next :HttpHandler) :

promettre<HttpEvent<any>>{

consttoken=await this.msalService.getAccessToken() ;

let changedRequest=request ;

Objet HttpHeader immuable - copier les valeurs

constheaderSettings :{[name :string] :string|string[] ;}={};

for(constkey de request.headers.keys()){

headerSettings[clé]=request.headers.getAll(clé) ;

} if(jeton){

headerSettings['Autorisation']='Porteur '+token ;

} headerSettings['Content-Type']='application/json' ;

constnewHeader=newHttpHeaders(headerSettings) ;

changedRequest=request.clone({

headers :newHeader}) ;

returnnext.handle(changedRequest).toPromise() ;

Quelques points à noter ici. Comme je travaille avec async / await et que j’utilise des Promises dans mon code et que la méthode d’interception renvoie un Observable , je dois convertir ma Promise en un Observable à l’aide de la méthode Observable.fromPromise.

Dans la méthode handleAccess, j’obtiens mon jeton d’accès de mon msalService. Il s’agit d’un service de gestion de la connexion / accès, etc.

L’étape suivante consiste à ajouter le jeton à la requête HttpClient.

Un

point très important est que vous ne pouvez pas simplement définir ou ajouter de nouveaux en-têtes à l’objet de demande.

Les objets request et header sont immuables. Même si vous modifiez quelque chose en ajoutant un nouvel en-tête ou en essayant de définir un en-tête, cela ne fonctionnera pas. Cela m’a pris un certain temps à comprendre, car l’api de ces objets vous permet de le faire . Mais les modifications que vous apportez ne sont pas répercutées dans les demandes que vous ferez par la suite.

La solution est donc de copier/cloner les objets originaux et faites les modifications là-bas (voir le code ci-dessus)

Ajoutez CustomHttpInterceptor à @NgModule

Donc, la seule chose qui reste à faire est d’enregistrer le nouveau CustomHttpInterceptor , afin qu’il soit utilisé à partir de maintenant.

import{HTTP_INTERCEPTORS}from'@angular/common/http' ;

{ provide :HTTP_INTERCEPTORS,

useClass :CustomHttpInterceptor,

c’est tout !

Cet article montre donc comment ajouter un en-tête d’autorisation personnalisé à toutes les requêtes HttpClient dans Angular 5. De même, vous pourriez, par exemple, ajouter du code pour effectuer une redirection vers une page de connexion ici au cas où vous obtiendriez un 401 (non autorisé) de l’API REST.

J’espère que cet article aidera certaines personnes à gagner du temps que j’ai perdu à cause de l’en-tête de demande d’objet immuable.

Si vous avez des questions, etc., laissez un commentaire ci-dessous.