No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
18H
35M
24S

Guard para Admin

22/25
Recursos

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 鈥渞ol鈥 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.

Aportes 7

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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.

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;
  }

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

{
    "id": 1,
    "email": "[email protected]",
    "password": "changeme",
    "name": "Jhon"
  },
  {
    "id": 2,
    "email": "[email protected]",
    "password": "12345",
    "name": "Maria"
  },

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

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

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

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.