Le traitement des tokens basés sur l'API est parfois fastidieux. Du fait que, à chaque demande, nous devons envoyer un token en paramètre pour pouvoir contacter le serveur.
Dans Angular, cela devient plus facile à l'aide d'intercepteurs HttpClient. Dans ce didacticiel, je vais vous expliquer comment configurer une fois un token et l'utiliser à chaque demande avec des intercepteurs.

• Preréquis
• Intercepteurs
• Conclusion

Preréquis

Configurer une nouvelle application Angular

ng new my-app

Ajoutez ensuite un fichier de service qui gérera la logique d'envoi de la demande.

ng generate service data

Une fois le service correctement généré, ajoutez les lignes suivantes pour envoyer la demande au serveur.

import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get("https://example.com/api/data", {
      params: new HttpParams().set(
        "auth-token",
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9"
      )
    });
  }

  getUsers() {
    return this.http.get("https://example.com/api/users", {
      params: new HttpParams().set(
        "auth-token",
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9"
      )
    });
  }
}

Et dans votre app.component.ts appelez le service que nous avons créé pour répondre à la demande.

import { Component } from "@angular/core";

import { DataService } from "./data.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  constructor(private dataService: DataService) {}

  showData() {
    this.dataService.getData().subscribe(response => {
      // Write your logic here to handle the data
      console.log(response);
    });
  }

  showUsers() {
    this.dataService.getUsers().subscribe(response => {
      // Write your logic here to handle the data
      console.log(response);
    });
  }
}

Comme vous pouvez le voir dans le fichier data.service.ts, nous utilisons les mêmes params pour les méthodes getData() et getUsers() pour envoyer le token.
Il est maintenant temps de l'optimiser avec des intercepteurs.

Intercepteurs

Les intercepteurs Http ont été introduits avec la version 4.3 d'Angular. Ils aident beaucoup à traiter les demandes avec les mêmes paramètres ou en-têtes.
Pour l'implémenter, nous devons créer un nouveau fichier auth.interceptor.ts. Vous pouvez le nommer comme vous voulez, mais c'est une convention d'ajouter .interceptor pour être clair sur ce qu'il y a dans le fichier de classe. Ajoutez ensuite ce bloc de code suivant au fichier.

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

export class AuthInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const cloneReq = req.clone({
      params: req.params.set(
        "auth-token",
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9"
      ),
    })
    return next.handle(cloneReq)
  }
}

Tout d'abord, nous devons importer HttpInterceptor et l'implémenter dans notre classe pour pouvoir accéder à la méthodeintercept(). Ensuite, nous passons deux arguments req et next à cette méthode. Le premier est la demande de type HttpRequest et peut avoir n'importe quel type de données, et le second suivant traitera la demande et la laissera continuer son voyage.
La méthode intercept() est de type Observable et peut recevoir tout type d'événements.
La requête Http est par défaut immuable, nous ne pouvons pas la modifier. Par conséquent, nous devons créer une copie en clonant la demande avec req.clone(). Maintenant, avec cette méthode, nous pouvons configurer nos paramètres directement et renvoyer la demande cloneReq et la laisser continuer son chemin vers le serveur.
Maintenant, notre intercepteur ajoutera le token en tant que paramètre à chaque demande avant de le laisser atteindre le serveur. Nous pouvons même simplifier notre fichier data.service.ts en supprimant tout ce qui concerne les paramètres.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get("https://example.com/api/data");
  }

  getUsers() {
    return this.http.get("https://example.com/api/users");
  }
}

Conclusion

Les intercepteurs HTTP sont utiles dans tous les domaines. C'est un peu comme un middleware dans le développement back-end. Nous pouvons l'utiliser pour modifier nos demandes ainsi que nos réponses.