Enviar Token con un interceptor

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

El uso principal para los Interceptores es para la inyección del token en las request.

Inyección de token

Veamos cómo puedes utilizar los interceptores para la inyección de token a las solicitudes HTTP.

1. Crea el interceptor

Para esto, crea un nuevo interceptor que lea el token desde el storage donde decidiste guardarlo y posteriormente inyectarlo en las peticiones.

// interceptors/token-interceptor.interceptor.ts
@Injectable()
export class TokenInterceptorService implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    request = this.addHeaders(request);
    return next.handle(request)
  }

  private addHeaders(request: HttpRequest<any>) {
    let token: string | null = '';
    token = localStorage.getItem('platzi_token');
    if (token) {
      return request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    } else {
      return request;
    }

  }
}

2. Duplicando la solicitud

La función addHeaders() recibe la request y usando clone() crea una copia de si misma para inyectar el token. De no existir este, devuelve la request tal cual fue recibida.
De esta manera, limpias por completo tu servicio que se ocupa de la autenticación de usuarios y centralizas toda la lógica de inyección de headers en el interceptor.

Y no olvides de importar el nuevo interceptor en tu módulo.

// app.module.ts
import { ErrorsInterceptor } from './interceptors/errors.interceptor';
import { TokenInterceptorService } from './interceptors/token-interceptor.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorsInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true }
  ]
})
export class AppModule { }

Agrégalo a los providers y si ya tienes otro interceptor, también agrega la propiedad multi: true a cada uno de ellos.

Contribución creada por: Kevin Fiorentino.

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Jimmy Buriticá Londoño

hace 3 años

localStorage y sessionStorage

localStorage y sessionStorage son propiedades que acceden al objeto Storage y tienen la función de almacenar datos de manera local, la diferencia entre éstas dos es que localStorage almacena la información de forma indefinida o hasta que se decida limpiar los datos del navegador y sessionStorage almacena información mientras la pestaña donde se esté utilizando siga abierta, una vez cerrada, la información se elimina.

Franklin Gil

hace 2 años

me da anciedad cuando el profe hace los imports manualmente xD

alberto ayala rodriguez

hace 3 años

este tema de los interceptores me recordó a los middleware de express con node.js, una cosa bastante picante amigos!!!

Johnatan Sarmiento

hace 3 años

<code> 

 if(user){
            request = request.clone({
                setHeaders:{
                    Authorization: `Bearer ${user.token}`
                }
            });
        }
        return next.handle(request);

Yerson Alexander Arredondo García

hace 2 años

Me parece que el código queda mucho más legible así:

private addToken(request: HttpRequest<unknown>) {
        const token = this.tokenService.get();

        if (!token) {
            return request;
        }

        const authResquest = request.clone({
            headers: request.headers.set('Authorization', `Bearer ${token}`)
        });

        return authResquest;
    }

Julian Franco

hace 2 años

Una opcion para manejar con Cookies seria la siguiente:

Instalamos una dependencia extra.

npm install ngx-cookie-service --save

Y agregamos esto a nuestros servicios, recordemos que podemos configurarla, traerla y tambien eliminarla.

import { Injectable } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Injectable({
  providedIn: 'root'
})
export class TokenService {


  constructor(
    private cookieService: CookieService
  ) { }

  saveToken (token: string){
    this.cookieService.deleteAll('/');
    this.cookieService.set("platzi_token", token)
  }

  getToken(){
    return this.cookieService.get("token")
  }

  removeToken() {
    this.cookieService.deleteAll('/')
    this.cookieService.delete("token", '/');
  }
}