Actualmente la API no permite agregar una propiedad “role” para la creación de nuevos users
Manejo de rutas
Qué aprenderás sobre Angular Router y programación modular
Creando rutas
Creando el Home
Página de categorías
Evitando doble subscribe
RouterLink y RouterActive
Ruta 404
Detalle de cada producto
Parametros URL
Módulos
LazyLoading y CodeSplitting
Programación Modular
Vistas anidadas
Creando el CMS Module
Creando en Website Module
Creando un Shared Module
Precarga de módulos
Precarga de módulos
All Modules y Custom Strategy
QuickLink Strategy
Guardianes
Conoce a los Guardianes
Implementando redirects
Estado de login
Guard para Admin
CanDeactivate
Deployment
Netlify Deployment
Despedida
Despedida
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
Paga en 4 cuotas sin intereses
Termina en:
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.
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>
.
Al utilizar este comando, nos hará una pregunta sobre qué interfaz quieres que implemente por defecto:
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.
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
Actualmente la API no permite agregar una propiedad “role” 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
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 “nav.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;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.