Cursos Empresas Blog Live Conf Eventos Precios

0:009:17

Recursos

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.

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

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 22 / 25

Ver clases

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

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 22 de 25

Clase 22 / 25

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

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 22 / 25

Ver clases

// 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 ] }, ];

Comentarios

Alejandro Mejia Escobar#3133107

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

Henry De La Hoz#3380145

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.

Santiago Velandia Gallo#3930993

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 Venegas#3976931

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"
  },

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;

  }

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

Comentarios

Alejandro Mejia Escobar#3133107

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

Henry De La Hoz#3380145

Santiago Velandia Gallo#3930993

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 Venegas#3976931

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"
  },

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;

  }

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

Juan Luna#4502854

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.

Recursos

Resumen

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

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

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

Progreso del curso

Manejo de rutas

Módulos

Precarga de módulos

Guardianes

Deployment

Despedida

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

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

Recursos

Resumen

Proceso para hacer Guard para Admin

Comentarios

Recursos

Resumen

Proceso para hacer Guard para Admin

Comentarios