0

Actualmente estoy realizando una aplicación en Angular 9, pero tengo el siguiente problema, al momento de hacer login el componente no refresca la vista con los datos que llegan del servicio, pero al momento de actualizar la página con F5 si se actualiza la vista correctamente.

Lo que quiero hacer es dependiendo del rol de la persona se activen o desactiven algunas opciones del navbar y más adelante desactivar algunas opciones dentro de los formularios como botones y opciones a elegir

app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { AuthService } from './services/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private loginSubscription: Subscription = null;

  title = 'frontend';
  codeU = localStorage.getItem('CODE');
  rol:string;
  usserLogged;

  constructor(public authService: AuthService){
    console.log("CodeU: "+this.codeU); 
    console.log("Service.Rol: "+this.authService.getRol)
    this.rol = this.authService.getRol
  }

  ngOnDestroy(): void {
    this.loginSubscription.unsubscribe();
  }
  
  logout(){
    this.authService.logout();
    this.codeU = ""
  }

  ngOnInit() {
    this.usserLogged = this.authService.isUserLogged();
    this.codeU = localStorage.getItem('CODE'); 
    this.loginSubscription = this.authService.onChange.subscribe(()=>{
      this.rol = this.authService.getRol;
    })
  }
}

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light"  *ngIf="this.authService.isUserLogged()">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="assets/img/valtti.png" style="height: 100%;width: 80px;" alt="Valtti Motors" loading="lazy">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Usuarios
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" routerLink="/api/user">Usuarios</a>
            <a class="dropdown-item" routerLink="/api/changepass" *ngIf="this.rol == 'admin'">Cambiar Password</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/contratos/nuevo">Nuevo Contratos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/contratos/contrato">Contratos</a>
        </li>
        <li>
          <a class="nav-link" routerLink="/contratos/lista">Lista</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" routerLink="/api/login" routerLinkActive="active" (click)="logout()">Salir</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  {{this.rol}} <!-- Solo actualiza cuando refresco la pagina con F5-->
  <router-outlet></router-outlet>
</div>

auth.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { UserI } from '../models/user';
import { JwtResponseI } from '../models/jwt-response';
import { tap } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Observable, BehaviorSubject } from 'rxjs';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
import { Subject } from "rxjs";

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  private onLoginChange = new BehaviorSubject<string>("");
  public onChange = this.onLoginChange.asObservable();


  AUTH_SERVER: string = environment.DB;
  private token: string;
  public rol:string ="user";

  public get getRol(){
    console.log(localStorage.getItem('ROL'));
    localStorage.getItem('ROL');
    return localStorage.getItem('ROL');//"admin"//localStorage.getItem('ROL');
  }

  constructor(
    private httpClient: HttpClient,
    private router: Router) { }
login(user: UserI): Observable<JwtResponseI>{
    return this.httpClient.post<JwtResponseI>(`${this.AUTH_SERVER}/login`,
        user).pipe(tap(
          (res: JwtResponseI) => {
            if(res){
              this.rol = res.dataUser.rol;
              console.log("RolSer: "+res.dataUser.rol)
              this.saveToken(res.dataUser.accessToken, res.dataUser.expiresIn, res.dataUser.code, this.rol);
              this.onLoginChange.next(this.rol)
            }
          })
        );
  }

  logout(): void{
    this.token = '';
    localStorage.removeItem('CODE');
    localStorage.removeItem('ACCESS_TOKEN');
    localStorage.removeItem('EXPIRES_IN');
    localStorage.removeItem('ROL');
    this.rol = "";
  }

  private saveToken(token: string, expiresIn: string, code: string, rol: string):void{
    localStorage.setItem('ACCESS_TOKEN',token);
    localStorage.setItem('EXPIRES_IN',expiresIn);
    localStorage.setItem('CODE',code);
    localStorage.setItem('ROL',rol);
    this.token = token;
  }
}

He probado con el Subject y el BehavorSubject en el OnInit, pero no logro hacer que me funcione.

De ante mano muchas gracias

1 respuesta 1

0

ya resolví el problema comento lo que me estaba pasando

en app.module.ts tiene que ser el único lugar donde instancio a AuthService

providers: [AuthService]

si lo instancio en algún otro modulo crea otra instancia de AuthService la cual es distinta y por ende las variables no están inicializadas correctamente

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.