No tienes acceso a esta clase

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
5H
3M
40S

Conoce a los Guardianes

19/25
Recursos

Una aplicaci贸n tendr谩 N cantidad de rutas, pero es posible que muchas de estas tengan restricciones de acceso solo para administradores o determinados roles de usuario.

En estos casos, los Guards llegan para ayudarnos a darle seguridad a nuestras rutas.

C贸mo segurizar Rutas

Con ayuda del CLI de Angular, puedes crear tu primer guardi谩n con el comando ng generate guard <nombre-guard> o en su forma corta ng g g <nombre-guard>.

1. Creando el primer guard

Al utilizar este comando, nos har谩 una pregunta sobre qu茅 interfaz quieres que implemente por defecto:

CLI Angular Guards.png

Cada opci贸n tiene una funcionalidad distinta para cada tipo de Guard. Escoge la primera opci贸n llamada CanActivate.

Al auto generar el c贸digo, ver谩s tu primer Guard con el siguiente aspecto.

// modules/shared/guards/admin.guard.ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

}

Un Guard puede devolver un booleano, una promesa con un booleano o un observable, tambi茅n con un booleano. Dependiendo la l贸gica que tengas que aplicar para el caso sea s铆ncrona o as铆ncrona.

2. Importando el guard

Ahora importa el nuevo Guard el routing de tu aplicaci贸n.

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

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

Agr茅gale a las rutas que quieras segurizar canActivate: [ AdminGuard ].
De esta manera, ya puedes implementar la l贸gica que necesites para cada Guard. En este caso, permitir el acceso al m贸dulo CMS solo para usuarios administradores.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 11

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Actualmente la API no permite agregar una propiedad 鈥渞ole鈥 para la creaci贸n de nuevos users

Bueno ya sabemos que los profesores est谩n despegados de los comentarios de sus alumnos, porque no contestan nada, ni a preguntas ni a nada, que l谩stima, con lo buena que es esta plataforma 鈥

user.model.ts

export interface User {
  id: string;
  name: string;
  email: string;
  password: string;
  role: 'customer' | 'admin';
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface CreateUserDTO extends Omit<User, 'id' | 'role'> {}

profile.component.html

<div *ngIf="user">
    <h1>My Profile</h1>
    <p>Nombre: {{user.name}}</p>
    <p>Email: {{user.email}}</p>
    <p>Role: {{user.role || 'customer'}}</p>
</div>

esa es una soluci贸n f谩cil y ya veremos cuando apliquen lo del admin

Guards

Los Guards en Angular, son de alguna manera: middlewares que se ejecutan antes de cargar una ruta y determinan si se puede cargar dicha ruta o no.

Para no tener problemas con el rol del usuario, si se est谩 continuando el desarrollo desde el curso anterior, se tiene que tener en cuenta que la API ahora es otra.
https://damp-spire-59848.herokuapp.com
La del curso anterior es
https://young-sands-07814.herokuaoo.com/api/iusers

Para generar guardianes es:

ng g g

la segunda g es por Guards, para generar lo que nos ense帽a en esta clase es

ng g g guards/auth

Todo iba bien, hasta que cambian el api, por que la que se venia desarrollando no soporta los roles

el tema de los guardianes est谩 cool 馃枛

Para los que tengan problemas con la creaci贸n de los guardianes por
utilicen el comando

ng generate guard guards/auth

Hice esto porque en el nav-bar segu铆a apareciendo el boton al cambiar de pagina

  ngOnInit(): void {
    this.storeService.myCart$.subscribe(products => {
      this.counter = products.length;
    });
    this.getAllCategories();
    const token = this.tokenService.getToken();
       if(token){
        this.authService.getProfile().subscribe(data=>{
          this.profile =data;
        });
       }
  }

Si est谩n trabajando con el c贸digo anterior y no lo han descargado del repositorio del profesor, como yo eh hecho. Probablemente tengan problemas con el Login. El problema es que como cambiaron de API, el usuario que por default pusieron en el c贸digo anterior no existe. Para esto solo tienen que crear un nuevo usuario con el siguiente endpoint:

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

{
    "name": "Usuario",
    "email": "[email protected]",
    "password": "123456"
}

Despu茅s poner el la parte del componente 鈥渘av.component.ts鈥, en el m茅todo login:

login(): void {

    this.authService.loginAndGet('[email protected]', '123456')
    .subscribe(user => {
      console.log(user);
      this.profile = user;
    });

  }

Model User

export interface User {
  id: string;
  email: string;
  password: string;
  name: string;
  role: string;
}