2

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!

5
  • Pero cuál es el problema? Te muestra todas las opciones del nav? No te muestra ninguna? No se cumple la condición? el 11 may. 2019 a las 3:54
  • Te recomiendo que la logica la menejes por medio de un servicio, oculta la barra asi <app-navbar *ngIf="loginService.isUserLogged() ></app-navbar> y por medio de una variable reactiva actualices las opciones del menu cuando el usuario realiza login en el aplicativo
    – Alejandro
    el 11 may. 2019 a las 16:34
  • el problema es que con esos ngIf que tengo colocados, el navBar no se actualiza cuando inicio sesión, se actualiza solamente cuando recargo la pagina el 12 may. 2019 a las 2:51
  • probare tu idea Alejandro y avisare si me funciono, muchas gracias el 12 may. 2019 a las 2:52
  • lo pudiste solucionar? yo lo estoy implementado tal cual lo dicen pero no lo hace, tengo que actualizar el navegador para que se vean los datos...me puedes compartir como lo hiciste por favor. gracias
    – jaime ruiz
    el 13 oct. 2020 a las 16:20

1 respuesta 1

1

El problema que estás experimentando es porque el código para obtener tu usuario del LocalStorage está en el constructor del componente, por lo que sólamente se ejecuta cuando instancias el componente, es decir, cuando cargas la página.

En el código donde inicias de sesión a tu usuario debes llamar a una función para actualizar a tu user. Para ello lo mejor sería implementar esta lógica en un servicio que puedas inyectar en todos los componentes que necesiten.

Ejemplo:

    export class NavbarComponent implements OnInit {
      public get currentUser() {
        return this.userService.currentUser;
      }

      constructor(private _router: Router, private userService: UserService) {}

      // -- El resto de tu componente aqui --
    }

Y en el servicio debes de tener una variable pública donde guardas a tu usuario:


    @Injectable({ providedIn: 'root' })
    export class UserService {
       public currentUser = null;

       constructor() {
          this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
       };
    }

En el sitio donde haces el login del usuario puedes inyectar el mismo servicio y actualizar el usuario de manera similar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.