Creación de Guardianes en Angular para Control de Acceso por Rol

Clase 22 de 25 • Curso de Angular Router: Lazy Loading y Programación Modular

Resumen

Es tu turno de continuar explorando los Guards de Angular y sus posibilidades para la segurización de rutas. El reto para ti es crear un Guard que valide el "rol" del usuario logueado y le permita o no entrar a los módulos de administración de tu aplicación.

Proceso para hacer Guard para Admin

Recuerda importar los Guards en el routing de tu aplicación, ya sea para bloquear el acceso a los módulos o el acceso a un componente individual.

// app-routing.module.ts
import { AuthGuard } from './modules/shared/guards/auth.guard';
import { AdminGuard } from './modules/shared/guards/admin.guard';

const routes: Routes = [
  {
    path: 'cms',
    loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule),
    canActivate: [ AuthGuard, AdminGuard ]
  },
];

También puedes segurizar las reglas de tu routing con más de un Guard a la vez, separando así la lógica de autenticación y autorización de los usuarios.

Contribución creada por: Kevin Fiorentino.

Alejandro Mejia Escobar

student•

Para quienes estaban trabajando con el anterior API, el nuevo es: https://damp-spire-59848.herokuapp.com

Jimmy Buriticá Londoño

student•

Gracias, aún seguía con la anterior y no obtenía el role del usuario.

Earvin Saúl Pérez Ramos

student•

Solo para recordarles que tienen que cambiar la API en el archivo proxy.config.json y en el environment.prod.ts

Henry De La Hoz

student•

Cabe señalar que, es importante asegurarse en el backend que los request a endpoints de administración lo realicen usuarios con dichos roles, no es buena practicar delegar esas verificaciones al front. Obviamente, aplicar lo que estamos aprendiendo en esta clase mejora mucho la experiencia de usuario y es una primera línea de seguridad para la aplicación.

Diego Frank Lipa Choque

student•

Aqui la url

https://damp-spire-59848.herokuapp.com/api/users

Santiago Velandia Gallo

student•

Ya logré conservar la pagina al recargar, lo que hice fue poner en localstorage un rol en el servicio de auth y le asigno el rol del usuario y si es admin, le doy acceso

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      const token = this.authService.getAdminRole();
     if (token!='admin') {
       this.router.navigate(['/home']);
       return false;
     }
     return true;

  }

en auth service:

  getAdminRole(){
    const token = localStorage.getItem('role');
    return token;
  }

Jorge Luis Vilca Venegas222

student•

Los usuarios del Api/users no llevan el campo rol, por lo que no se puede probar estar parte

{
    "id": 1,
    "email": "john@mail.com",
    "password": "changeme",
    "name": "Jhon"
  },
  {
    "id": 2,
    "email": "maria@mail.com",
    "password": "12345",
    "name": "Maria"
  },

Carlos Gomez

student•

Vuelvo a dejar el link con el que he trabajado todos los cursos sin problema.

https://api.escuelajs.co/docs#/

Juan Luna

student•

Algo pasa, que no estamos teniendo en cuenta. Anteriormente creé un usuario admin y un par de usuarios customer, e hice login con uno y con otro, pero después de un rato.

si yo me estoy haciendo login con este usuario

{
email: 'johnydeep@gmail.com', 
password: '12345678'
}

pero ahora cuando me devuelve el token, me da esto

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImpvaG55ZGVlcEBnbWFpbC5jb20iLCJzdWIiOjMsImlhdCI6MTY3NDIzNTIxNCwiZXhwIjoxNjc0MjM4ODE0fQ.XsWStL18-lHd798q6XnHkhaelbxE0P-K68hAa3OCV98

que desencriptado es:

{
	"header":{
		"alg":"HS256"
		"typ":"JWT"
	}
	"payload":{
		"email":"johnydeep@gmail.com"
		"sub":3
		"iat":1674235214
		"exp":1674238814
	}
}

vemos que se corresponde con el email del usuario, pero, aquí viene la cosa, al hacer el getProfile(), me muestra esto otro.

{
	id: 3, 
	email: 'admin@mail.com', 
	password: 'admin123', 
	name: 'Admin', 
	role: 'admin'
}

No entiendo, hay algo que no estamos teniendo en cuenta con el user$ ¿Podrías revisar ese código, por favor, del vídeo 22?

¿Qué enviamos, qué recibimos y porqué muestra lo que muestra, que no se corresponde?

Gracias de antemano.

Juan Luna

student•

Algo pasa, que no estamos teniendo en cuenta. Anteriormente creé un usuario admin y un par de usuarios customer, e hice login con uno y con otro, pero después de un rato.

si yo me estoy haciendo login con este usuario

{email: 'johnydeep@gmail.com', password: '12345678'}

pero ahora cuando me devuelve el token, me da esto

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImpvaG55ZGVlcEBnbWFpbC5jb20iLCJzdWIiOjMsImlhdCI6MTY3NDIzNTIxNCwiZXhwIjoxNjc0MjM4ODE0fQ.XsWStL18-lHd798q6XnHkhaelbxE0P-K68hAa3OCV98

que desencriptado es:

{2 items
"header":{2 items
"alg":"HS256"
"typ":"JWT"
}
"payload":{4 items
"email":"johnydeep@gmail.com"
"sub":3
"iat":1674235214
"exp":1674238814
}
}

vemos que se corresponde con el email del usuario, pero, aquí viene la vaina, al hacer el getProfile(), me muestra esto otro.

{
	id: 3, 
	email: 'admin@mail.com', 
	password: 'admin123', 
	name: 'Admin', 
	role: 'admin'
}

¿Qué chimbas está pasando wei?, ¡no es broma!

No entiendo, hay algo que no estamos teniendo en cuenta con el user$ ¿Podrías revisa ese código, del vídeo 22?

¿Qué enviamos, qué recibimos y porqué muestra lo que muestra, que no se corresponde?

Gracias de antemano.

Rodrigo Josue Goitia Quiroga

student•

Hola Juan Me parece que debe haber algún lugar en el que no se está actualizando este perfil. Compártenos el código que tienes en los archivos donde crees que haya un error.

Te sugiero revisar el archivo en el que se define al profile del usuario y su contraseña. También puedes ver en los recursos de la clase todos los archivos que tiene el profesor en el repositorio y verificar si es que hay alguna línea que tú tengas que sea diferente.

Rodrigo Josue Goitia Quiroga

student•

Hola Juan Me parece que debe haber algún lugar en el que no se está actualizando este perfil. Compártenos el código que tienes en los archivos donde crees que haya un error.

Luis Enrique Partida Vega

student•

Si se accede por el link que se creó en profile, se puede acceder sin problemas al cms, pero si se da la ruta al navegador, directamente hace redirección a home, ¿alguna idea de como arreglar esto?

Darwing Steven Sánchez Londoño

student•

Hola Luis, claro que sí, tengo una forma de arreglarlo, pero realmente no sé si es la mejor, sin embargo me funcionó.

El problema radica en la lógica que Nicolas utiliza en el Guard, donde en un return pone el observador y con ayuda de map modifica el return, realmente no sé porque es el problema, ( si alguno sabe, porfavor dejalo saber ), siguiendo con la solución y con el objetivo de seguir utilizando el observador o la reactividad, nos suscribimos tal y como lo hicimos anteriormente en los otros componentes, esto dentro del metodo canActivate:

this.authService.user$
    .subscribe( user => this.user = user)

Antes de esto, asegurate tener una variable puede ser arriba del constructor donde almacenaremos lo que el observador nos devuelve, que es el usuario..

private user : User | null = null

Luego, después de suscribirte (Dentro de canActivate) haces la condicional con la varible y retornas:

if(!this.user){
        this.router.navigate(['/home'])
        return false
      }
      return true

Esto lo puedes utilizar también en el Guard del admin, sólo que allí debes verificar en la condicional que el rol sea el de admin

Diego Fernando Caviedes Camaho

student•

Es porqué al esperar la respuesta o subscripciòn del Observable llega como Undefined entonces seria hacer un esperar para esperar que se complete la subscription

Leandro Alvarez

student•

Esta clase se relaciona en el step19 del repo https://github.com/platzi/Angular-router/tree/19-step/src/app/guards

José Nicolás Aristizabal Ramírez

student•

https://damp-spire-59848.herokuapp.com/ está retornarndo siempre el perfil del rol de administrador independientemente del token que se le envíe, quisiera saber si solo me está sucediendo a mi o es un error generalizado para todos ? Gracias

Jean Carlos Haro Luyo

student•

Me sucede lo mismo

Jean Carlos Haro Luyo

student•

Pero si le cambias por otra cuenta que estaban en el postman, si te entran con esas cuentas, menos con el que has creado :/

Victor Marcel Restrepo Porras

student•

Si no dejas que cargue la aplicacion y el app component haga la request del get profile no te deja entrar al cms por via url directa, yendo al perfil y despues clickear el boton asegura que la request ya se haya hecho, pero como decia en la clase anterior, es mejor manejar un estado en localstorage que se consulte cuando se cargue la aplicacion sin request, ya sea encriptando el usuario en el token o algo parecido. A LOS QUE LES NIEGA EL ACCESO TIENEN QUE ESPERAR A QUE LA APP CONSULTE EL GET PROFILE, no es que la aplicación este mala.

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      const token = this.authService.getAdminRole();
     if (token!='admin') {
       this.router.navigate(['/home']);
       return false;
     }
     return true;

  }

Creación de Guardianes en Angular para Control de Acceso por Rol

Manejo de rutas

Angular Router y Programación Modular en eCommerce

Implementación de Routing en Angular: Creación de Componentes y Páginas

Configuración de rutas y refactorización de componentes en Angular

Renderizado Dinámico de Productos por Categoría en Angular

Optimización de suscripciones con SwitchMap en Angular

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Implementación de página 404 personalizada en aplicaciones web

Creación de Página de Detalle de Producto en eCommerce

Lectura de Parámetros URL en Angular para Filtrado y Navegación

Módulos

Optimización de JavaScript con Code Splitting en Angular

Programación Modular en Angular: Módulos y Lazy Loading

Vistas Anidadas y Programación Modular en Angular

Creación de un Módulo CMS con Enrutamiento en Angular

Transformación de Carpeta a Módulo en Angular

Creación y uso de módulos compartidos en Angular

Precarga de módulos

Precarga de Módulos en Angular para Mejorar el Rendimiento

Precarga de Módulos en Angular: Estrategias Personalizadas

Precarga de Módulos con QuickLink y Observable API en Angular

Guardianes

Protección de rutas en Angular con guardianes

Redirección y Logout en Aplicaciones Web con Tokens

Gestión Reactiva de Sesiones en Angular

Creación de Guardianes en Angular para Control de Acceso por Rol

Implementación de Guardianes en Angular para Controlar Salida de Rutas

Deployment

Despliegue de Aplicaciones Angular en Netlify paso a paso

Despedida

Routing avanzado en Angular: rutas, módulos y seguridad