No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
0H
11M
26S

Enviar Token con un interceptor

19/23
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 10

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

me da anciedad cuando el profe hace los imports manualmente xD

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

<code> 

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

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;
    }

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", '/');
  }
}

The username: [email protected] 鈥淣OT FOUND鈥 馃珷

storage token

Super!!

Muy buena clase. Gracias