Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Creando interceptores en http

18/25
Recursos

Aportes 7

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

ng g interceptor auth

Funciona para crearlo por linea de comandos

Creo que el código está mal.

if  (true) { 

Siempre se va a ejecutar.
Creo que lo correcto sería

if (token) {

Hola, realice los respectivos pasos para agregar el interceptor, pero al momento de colocar el setHeader y iniciar el consumo de peticiones, este me genera un problema de CORS. No sé que más hacer con el tema.

<h3>INTERCEPTAR PETICIONES EN ANGULAR</h3>

Los interceptores en angular 2+ no siempre existieron, se agregaron desde la versión angular 4.3, apesar de que angularJS siempre los tuvo.
Para implementar un interceptor se tendría:

  1. Implementar la interfaz HttpIntecerptor
  2. Configurar en los provider, el provider HTTP_INTERCEPTORS, que se use la implementación HttpIntecerptor.
<h4>1. Implementando la interfaz HttpInterceptor</h4>

El interceptor solo necesita un método intercept.

file: auth.interceptor.ts

@Injectable()
export class AuthInterceptor implements HttpInterceptor{
	intercept( request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
		//todo ...
		return next.handle(request);
	}
}

<h4>2. Configurar el provider</h4>

Ahora en el modulo principal de proyecto debemos configurar el proveedor, como se muestra a continuacion.
file: app.module.ts

providers:[
...
{
	provide: HTTP_INTERCEPTORS,
	useClass: AuthInterceptor,
	multi: true
}
]

Hola, si quisiera que intercepte por ejemplo solo a la petición de products no de auth ni a cualquiera sino una en particular donde importaría el interceptor? saludos.

Otra forma de crear el interceptor:
En mi caso guardo el token en localstorage porque lo crea mi API pero ustedes pueden consumirlo a su manera

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('ACCESS_TOKEN');

    if (!token) {
      return next.handle(req);
    }

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

    return next.handle(req1);
  }
}

Por qué se usa request.clone? qué pasa si hago tokenizedRequest = request