he estado buscando un buen tiempo y no logro dar con la solución, espero me puedan ayudar!
Mi aplicación tiene un Nav-Bar que muestra botones que redireccionan al usuario a las demás rutas, el tema es que tengo 2 perfiles de usuario:
-Cliente -Administrador
los cuales poseen botones y rutas distintas. Aparte de eso, en la ruta principal de la aplicación se encuentra el login y aquí no debería de existir el nav-bar.
El usuario se guarda en la memoria cache del navegador.
He intentado ocupando *ngIF para validar el rol del usuario, pero este no funciona de manera inmediata, funciona cuando actualizo el navegador.
Este es el app.component.html:
<app-navbar></app-navbar>
<router-outlet></router-outlet>
Así hago que aparezca siempre el componente nav-bar en la parte de arriba de la aplicación.
Este es el navbar.component.html:
<mat-toolbar class="bg" *ngIf="CurrentUser.rut != ''" >
<mat-toolbar-row>
<img src="../../assets/img/logo.png" class="icon">
<p>Casinos Integrados</p>
<button (click)="Menus()" routerLinkActive="active" *ngIf="CurrentUser.role == 'cliente'"
class="btn btn-primary btnMenu1 ">Registro de Menus</button>
<button (click)="Historial()" routerLinkActive="active" *ngIf="CurrentUser.role == 'cliente'"
class="btn btn-primary btnMenu1">Historial</button>
<button (click)="Contacto()" routerLinkActive="active" *ngIf="CurrentUser.role == 'cliente'"
class="btn btn-primary btnMenu1">Contacto</button>
<button (click)="Hadmin()" routerLinkActive="active" *ngIf="CurrentUser.role == 'admin'"
class="btn btn-primary btnMenu1">Listado de Pedidos</button>
<button (click)="Madmin()" routerLinkActive="active" *ngIf="CurrentUser.role == 'admin'"
class="btn btn-primary btnMenu1">Carta</button>
<button (click)="Cadmin()" routerLinkActive="active" *ngIf="CurrentUser.role == 'admin'"
class="btn btn-primary btnMenu1">Clientes</button>
<span class="spacer"></span>
<button mat-raised-button (click)="LogOut()" *ngIf="CurrentUser.rut != ''" class="btnExit">Cerrar sesion</button>
</mat-toolbar-row>
</mat-toolbar>
Y por si se necesita, aqui esta el navbar.component.ts:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { User } from '../modelo/user'
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor(private _router: Router) {
if (localStorage.getItem("currentUser") == null) {
this._router.navigate(['']);
}
else {
var user = JSON.parse(localStorage.getItem('currentUser'));
if (user.role == 'admin') {
this.CurrentUser = user;
}
else {
this.CurrentUser = user;
}
}
}
ngOnInit() {
}
CurrentUser: User = new User();
Menus() {
this._router.navigate(['menu']);
}
Historial() {
this._router.navigate(['historial']);
}
Contacto() {
this._router.navigate(['contacto']);
}
Hadmin() {
this._router.navigate(['hadmin']);
}
Madmin() {
this._router.navigate(['madmin']);
}
Cadmin() {
this._router.navigate(['cadmin']);
}
LogOut() {
localStorage.removeItem("currentUser");
this._router.navigate(['']);
}
}
Estoy abierto a todo tipo de modificaciones de mi código, puedo pasar todo a bootstrap si es necesario o angular-material. Espero me puedan ayudar, de antemano muchas gracias a los que vieron mi problema. Saludos!