Cómo utilizar un interceptor de Angular sólo en las llamadas que tú quieras

¿Alguna vez te ha pasado que querías utilizar un interceptor de Angular, pero se aplicaba a toda la aplicación? ¿Tu vida es un infierno? HttpContextToken es tu solución, además llévate este pelapatatas por solo 4,99. Tu vida tendrá luz 🌞, colores 🌈 y sentido 🥲❓

Perdón, me he emocionado… A lo que íbamos.

Un interceptor en Angular es una parte de código que intercepta las llamadas que hagas con httpClient.

Considero que esto que voy a explicar es un nivel avanzado y hay voy a explicar términos como que es un JWT o como se hace un interceptor en Angular. De todas formas ya hay muchos tutoriales sobre ello, pero daré algunas pinceladas para que entiendas como implementarlo.

En el .ts en el que tengamos el interceptor creamos un nuevo HttpContextToken, que se importa desde @angular/common/http. En este ejemplo vamos a usarlo para comprobar el JWT sea válido en fecha de caducidad, y si está bien ya de paso lo ponemos en la cabecera para la autorización de la API.

example.interceptor.ts

import { HttpContextToken, ... } from '@angular/common/http';
export const CHECK_JWT = new HttpContextToken<boolean>(() => true);
...

Como ves HttpContextToken es un booleano a true, por lo que en este caso por defecto siempre va a comprobar el JWT, y en los casos en los que pongamos que es false, ignorará la comprobación del JWT y hará la petición. Puede ser cualquier tipo, no tiene por qué ser un booleano, podría ser un string o incluso un objeto.

Ahora en el servicio en el que tenemos la función de llamada a la API y en la que no quieras que verifique el JWT, tendrías que poner el HttpContext. Por favor no pongas nunca any, es solo para el ejemplo, creo que en algunos países hasta está penado por ley con muerte por kiki.

import { HttpClient, HttpContext, ... } from '@angular/common/http';
mySuperFunction(data: any): Observable<any> {
    return this.httpClient.post<any>('mi/llamada/a/la/api', data, { context: new HttpContext().set(CHECK_JWT, false) });
}

A continuación vamos a volver al interceptor (example.interceptor.ts) a hacer las comprobaciones correspondientes. Además, vamos a simular que tenemos una función asíncrona checkJWT() para comprobar el JWT, el cual nos devolverá el JWT para poner en la cabecera. Y una función logout() que simula el cierre de sesión del usuario.

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpContextToken,
  HttpErrorResponse
} from '@angular/common/http';

export const CHECK_JWT = new HttpContextToken<boolean>(() => true);

@Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (request.context.get(CHECK_JWT) === true) {
      return from(checkJWT()).pipe(
        mergeMap((asyncToken: string) => {
          if (asyncToken) {
            request = request.clone({
              setHeaders: {
                authorization: `Bearer ${asyncToken}`
              },
            });
          }
          return next.handle(request).pipe(
            tap({
              error: (error: HttpErrorResponse) => {
                logout();
              }
            }),
            catchError((error: HttpErrorResponse) => throwError(() => error))
          );
        })
      );
    }
    return next.handle(request);
  }
}

Esto lo puedes hacer de mil maneras dependiendo de lo que necesites, la parte importante del ejemplo es esta if (request.context.get(CHECK_JWT) === true), ya que ahí estamos mirando si quieres que se compruebe el JWT o no. Evidentemente, esto lo puedes invertir y hacer que nunca se verifique a no ser que lo pongas a true.

¡Saludos, terrícola! 🖖