Angular 8: Integrazione dell’autenticazione mediante JSON Web Token (JWT) con HttpClient e HttpInterceptors.

Introduzione

Sfruttando HttpInterceptors, verrà inserito il token (JWT) nel campo Authorization dell’header di tutte le chiamate REST successive all’autenticazione effettuate dall’applicativo.

Prerequisiti

Si presume sia già implementato il salvataggio nel LocalStorage del JWT ricevuto dal backend al momento dell’autenticazione.

Installazione dipendenze necessarie

 npm i —save angular2-jwt
 npm install @angular/http@latest
 npm install —save rxjs-compat

Integrazione

1. Crea servizio AuthService

ng g service auth

2. Inserisci il seguente codice nella classe AuthService (file auth.service.ts creato con il comando precedente) che si occuperà di effettuare il check della validità del token:

import { Injectable } from ‘@angular/core’;
import { tokenNotExpired } from ‘angular2-jwt’;
@Injectable()
export class AuthService {
public getToken(): string {
 return localStorage.getItem(‘token’);
 }
public isAuthenticated(): boolean {
 const token = this.getToken();
 return tokenNotExpired(null, token);
 }
}

3. Crea il file token.interceptor.ts che si occuperà di gestire il flusso dell’applicativo ad ogni chiamata REST. Di seguito il codice della classe TokenInterceptor:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
import { AuthService } from 'src/services/auth.service';
import { Observable } from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {}
  intercept(req: HttpRequest<any>, next: HttpHandler):     Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(req)
     .pipe(
       tap((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
         // Chiamata avvenuta con successo.
        }
     }, (error) => {
     if (error instanceof HttpErrorResponse) {
      if (error.status === 401) {
       // Login errata o token invalido.
      }
     }
    })
   );
  }
}

In questa classe sarà possibile gestire il comportamento dell’applicativo nel caso in cui il token non sia più valido (Reindirizzando ad esempio l’utente alla schermata di login o refreshando il token).

4. Aggiungi HttpInterceptors ai provider in app.module.ts:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './../auth/token.interceptor';
@NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

Credits:
1. Angular Authentication: Using the Http Client and Http Interceptors
2. Angular Authentication with JWT (Image)