Angular: Autenticación usando interceptors.

Introducción

Hablaré sobre cómo podemos aprovechar esta funcionalidad que nos da Angular para modificar las peticiones. No debe confundirse con los Guards. Los interceptors modifican las peticiones (enpoints, servicios, o como lo quieras llamar) y los guards controlan las rutas de navegación entre páginas de la aplicación web, permitiendo o denegando el acceso por ejemplo.

¿Qué es un interceptor?

Como lo expliqué brevemente arriba, un interceptor inspecciona/modifica las peticiones, osea, lo que va de tu aplicación al servidor y tambien lo que viene del servidor a tu aplicación. En pocas palabras, la petición y respuesta. Sabiendo que son los interceptors, podemos ir al ejemplo de uso.

Para crear nuestro interceptor, tenemos que generar un servicio usando el CLI de angular (puedes generar tu interceptor donde quieras en base a la estructura de tu proyecto):

> ng g s auth-interceptor

una vez creado el servicio implementa la interfaz HttpInterceptor y otras clases extras que se encuentran en ‘@angular/common/http’. A continuación implementa el método que está definido en la interfaz, llamado intercept. El servicio quedará de la siguiente manera:

Una vez hecho todo eso implementaremos la parte en que nuestro interceptor agrega la cabecera ‘Authorization’ con el token que vayamos a usar, como modo de ejemplo, imaginemos que tenemos el token almacenado en localStorage con la clave ‘token’ y para obtener el token tendremos que hacer lo siguiente: localStorage.getItem(‘token’).

ahora declaramos una constante que guarde el token obteniendolo del localStorage. El token puede o no existir en nuestro localStorage, y para no estar enviando la cabecera ‘Authorization’ vacía, condicionamos si existe algún token, posteriormente si existe un token, modificamos el request agregándole la cabecera, utilizando el método clone que viene en nuestro request de tipo HttpRequest y pasándole la cabecera con el token. una vez modificado el request lo retornamos de nuestro método.

Ahora bien, hay que recordar que los interceptors se ejecutan en cada petición que se realiza al servidor, siempre y cuando sean registrados. Para registrar un interceptor se tiene que proveer en el array de providers: [] en nuestro módulo raíz, por lo general AppModule. Importamos HTTP_INTERCEPTORS y HttpClientModule, luego proveémos nuestro interceptor. El módulo quedaría así:

Podemos observar que en nuestro provider utiliza la propiedad multi: true, esto permitirá agregar más interceptors si lo requerímos y no sobre escribir nuestro interceptor. En otras palabras, crean un array con el mismo provider token (HTTP_INTERCEPTORS). En este punto, nuestro interceptor modificará cada petición que se haga al servidor siempre y cuando exista un token.

Otra cosa que podríamos realizar en nuestro interceptor sería redirigir al usuario a la página de login cuando el token haya expirado o no tenga un token válido por ejemplo.

Modificaremos nuestro interceptor un poco, importando el operador catchError de rxjs, que recibe un método que va a revisar el status de la respuesta que el servidor nos devuelve. Cuando detectemos que el status es 401, hacemos la redirección a la vista de login, de igual manera el servicio Router e injectarlo en el constructor para utilizarlo y hacer la redirección.

Nota: En este método podémos aprovechar a manipular los errores para devolverlos a los servicios de una manera más limpia, pero eso sería otro tema.

Nuestro interceptor ahora quedaría de la siguiente manera:

En el método catchError se tiene que devolver el error y para eso usamos throwError.

Conclusión

Los interceptors son una manera sencilla de manipular nuestras peticiones y respuestas, evitando así realizar dicha modificación en cada servicio que realizamos manualmente. Esto nos ayuda a tener un código más limpio y mantenible.