Siguiendo la entrada anterior, en la que creamos varias rutas en un navbar, vamos a bloquear el acceso al componente "ProtegidaComponent" para los usuarios que no estén logueados en la aplicación.
Lo primero que podemos hacer es ocultar el enlace al componente en el navbar, lo que podemos hacer simplemente colocando la directiva *ngIf sobre el enlace al componente, llamando a la función "isAuthenticated" del servicio de Auth0, como hacemos a continuación:
De ésta forma, si un usuario entra en la web y no se loguea, no podrá ver en el navbar el enlace al componente "ProtegidaComponent".
Sin embargo, si el usuario conoce ya la ruta al componente (http://localhost:4200/protegida) y la introduce en el navegador, podrá entrar al componente sin problemas. Así, vemos que lo único que hacemos es ocultar el componente al usuario, pero realmente no estamos impidiendo su acceso.
Para corregir esto, vamos a crearnos un nuevo servicio, "AuthGuardService":
Una vez creado, lo colocamos, como siempre, en el "app.module.ts":
Ahora modificamos el servicio recién creado como sigue:
Como se puede ver, lo primero que hacemos es importar el servicio de Auth0 (AuthService) que creamos en la entrada anterior, además de una serie de componentes de Angular.
Después implementamos la interface "CanActivate" en la clase.
Inyectamos en el constructor el AuthService.
Implementamos la función "canActivate". A esta función le estamos pasando por parámetros un ActivatedRouteSnapshot (que nos sirve para conocer la ruta a la que se está intentando acceder) y un RouterStateSnapshot (que nos sirve para conocer el estado de la ruta) aunque en este momento no nos hace falta utilizar ninguno de esos dos componentes.
Lo que la función realiza simplemente es llamar a la función "isAuthenticated" del AuthService para comprobar si se está logueado o no, y devolver verdadero o falso dependiendo del caso.
Ahora bien, ¿qué hacemos con esta función? ¿desde dónde la llamamos?
Pues tenemos que modificar nuestro archivo de rutas como sigue:
Como se puede ver, hemos importado el servicio "AuthGuardService", y lo hemos introducido en un parámetro nuevo "canActivate" que hemos colocado en la ruta a "ProtegidaComponent".
Ahora, cada vez que intentemos entrar en esa ruta, Angular se encargará de llamar a la función "canActivate" del servicio y sólo nos dejará entrar si el valor retornado es verdadero.
Este nuevo parámetro es configurable, y le podemos añadir varias condiciones, de tal forma que se deben de cumplir todas para que la ruta sea accesible. Esto nos permite personalizar nuestra aplicación añadiendo varios niveles de usuarios y varias condiciones en las rutas.
Ahora levantamos la aplicación de nuevo, y comprobamos, igual que antes, que sólo nos muestra el enlace al componente "Protegida" si estamos logueados:
Pero además, si copiamos la ruta al componente y hacemos logout, al pegar la ruta en el navegador comprobamos que ya no nos deja acceder al componente.
Y eso es todo.
No hay comentarios:
Publicar un comentario