Omitir un Interceptor de Angular usando Context para Http Interceptors

#angular #typescript

Los interceptors en Angular llegaron desde la versión 4.3 y básicamente nos brindan un mecanismo para interceptar y/o mutar las solicitudes y respuestas http. Más detalles aquí.

Los interceptors en Angular interceptan todas las peticiones http por defecto, pero hay ocasiones en donde deseamos omitir un interceptor para algunas solicitudes.

Antes de la versión 12 de Angular era muy común hacer esto de alguna de las siguientes formas:

Agregar encabezados http en la solicitud http y luego evaluar ese encabezado en el interceptor.
Crear un nuevo httpClient para esa solicitud.
Administrar sus inyecciones de HttpClient con tokens.
Utilizar httpBackend y saltarse todos los interceptors.

HttpContext

Desde la versión 12 de Angular tenemos una mejor forma de hacer esto, la cual consiste en pasar metadatos a los interceptors http. Ya podemos olvidarnos de pasar encabezados personalizados a nuestros interceptors.

Un caso de uso común es indicarle al interpcetor que la solicitud http actual es anónima y no necesita un JWT (JSON WEB TOKEN).

Otro caso también podría ser indicarle al interceptor que una solicitud se puede almacenar en caché.

Nota: Recuerda que tenemos que tener la Angular v12 o superior en nuestro proyecto.

HttpContext: El contexto HTTP almacena valores arbitrarios definidos por el usuario y garantiza la seguridad de los tipos sin conocer realmente los tipos.

Context: Es mutable y se comparte entre solicitudes clonadas a menos que se especifique explícitamente.


//token.interpcetor.ts

//Declaramos un nuevo HttpContextToken

export const BYPASS_JW_TOKEN = new HttpContextToken(() => false);

export class TokenInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, delegate: HttpHandler): Observable<HttpEvent<any>> {
//Aquí evaluamos el contexto y omitimos el interceptor.
    if (req.context.get(BYPASS_JW_TOKEN) === true) {
      return next.handle(request)
    }
    return this.addToken(request);
  }
}

// service

/*
Así se ve una solicitud en la cual se quiere omitir el JWT, 
debemos pasar un nuevo contexto con el HttpContextToken 
declarado anteriormente en el interceptor.
*/

this.httpClient.get('/api/fakeEndPoint', {
  context: new HttpContext().set(BYPASS_JW_TOKEN, true),
});

Más detalles:

El token pasado al contexto del http interceptor puede ser cualquier tipo de dato como ser booleano, número, cadena, objeto etc. -El token pasado al contexto no debe confundirse con el JWT el cual es requerido para algunas solicitudes http.
La declaración del HttpContextToken se puede realizar donde tenga más sentido, aunque lo común es declararlo en el interceptor que lo va a utilizar.

Muchas gracias por leer este post.

Sígueme en twitter ricardo_chl