Agregar token a todos los request usando interceptors

Contexto:

Al realizar una llamada a una API rest es muy probable que se use un token de autenticación. Con el fin de no insertar ese token en cada request, puede usarse este interceptor para que antes de enviar la petición al servidor se inserte el token. De esta forma se puede hacer una sola implementación y de cambiar la forma de guardar u obtener el token solo se cambiaría en un lugar.

Se asume:

Que al obtener el token por primera vez lo estás guardando en el localstorage del navegador con la key ‘token’. Existen métodos alternativos de guardar el token que se verán en próximos tutoriales

app-interceptor.service.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';import { Injectable } from '@angular/core';import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
exportclass AppInterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest, next: HttpHandler): Observableany>> {
    const token = localStorage.getItem('token')
    const apiReq = req.clone({
      params: req.params.set('Authorization', 'Bearer ' + token)
    });
    return next.handle(apiReq);
  }
}

App Module

Para que el interceptor puede activarse debe agregarse como provider al App Module de la siguiente form

app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { LayoutComponent } from './components/layout/layout.component';import { MaterialModule } from './material/material.module';import { ReactiveFormsModule } from '@angular/forms';import { AppInterceptorService } from './core/interceptors/app-interceptor.service';

@NgModule({
  declarations: [
    AppComponent,
    //...other declarations
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MaterialModule,
    ReactiveFormsModule,
    //... other imports
  ],

  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AppInterceptorService,
    multi: true
  },
  //... other providers
 ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Descubre qué es un security token