1

Hola soy nuevo en angular y llevo ya dias tratando de solucionar este problema y la verdad no se que hacer.

Hace días vengo tratando de hacer un login en Angular que al iniciar sesión muestre en el navbar el nombre de la persona que inicio sesión y su rol, lo que he hecho es guardar pues el token en el localStorage, al igual que el nombre y el rol, entonces lo que hacia era que al iniciar el componente login, este seteaba el nombre y el rol y luego en appcomponent obtenía esos datos del localStorage y los ponia en el navbar, todo salia mal, al iniciar sesión se llenaba de errores al decir que no podía acceder a la propiedad del nombre de usuario y el rol, ya que estaba todo indefinido, al dar F5 me cargaba todo normal y me salia el usuario y el rol, busque soluciones y me recomendaron usar subject y eso es lo que hice, al usar subject por lo menos al iniciar sesión ya no me daba error, me cargaba correctamente todo, pero si recargaba la página, volvía a salir los errores, todo volvía a quedar indefinido, este es mi código :

APPCOMPONENT:

import { Component } from "@angular/core";
import { AuthService } from "./services/auth.service";
import { Subject } from 'rxjs/Subject';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public static updateUserStatus: Subject<boolean> = new Subject();
  user: any;
  constructor(private authService: AuthService) {
    AppComponent.updateUserStatus.subscribe(res => {
      this.user = this.authService.getUser();
    })
  }

  ngOnInit() {

  }
}

SIGN IN COMPONENT

import { Component, OnInit } from "@angular/core";
import { AuthService } from "../../services/auth.service";
import { Router } from "@angular/router";
import Swal from "sweetalert2";
import { AppComponent } from "src/app/app.component";

@Component({
  selector: "app-signin",
  templateUrl: "./signin.component.html",
  styleUrls: ["./signin.component.css"],
})
export class SigninComponent implements OnInit {
  user = {};
  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit() {}

  signIn() {
    this.authService.signIn(this.user).subscribe(
      (res) => {
        this.authService.setUser(res.datos);
        this.authService.setToken(res.token);
        //localStorage.setItem("token", res.token);
        AppComponent.updateUserStatus.next(true);
        this.router.navigate(["/home"]);
        //localStorage.setItem("datos", JSON.stringify(datosUser));
        Swal.fire(
          "Bienvenido " + res.datos.nombre_usuario,
          "Tu Rol es: " + res.datos.rol,
          "success"
        );

      },
      (err) => {
        Swal.fire({
          icon: "error",
          title: "Error",
          text:
            "No se ha podido iniciar sesion, verifique su correo y contraseña",
        });
      }
    );
  }
}

AUTHSERVICE:

import { Injectable } from "@angular/core";
import { HttpClient, HttpInterceptor } from "@angular/common/http";
import { Router } from "@angular/router";
import { isNullOrUndefined } from "util";
import { Observable } from "rxjs/internal/Observable";
import { map } from "rxjs/operators";

@Injectable({
  providedIn: "root",
})
export class AuthService {
  private URL = "http://localhost:3000";
  constructor(private http: HttpClient, private router: Router) {}

  signUp(user) {
    return this.http
      .post<any>(this.URL + "/signup", user)
      .pipe(map((res) => res));
  }

  signIn(user): Observable<any> {
    return this.http
      .post<any>(this.URL + "/signin", user)
      .pipe(map((res) => res));
  }

  loggedIn() {
    if (localStorage.getItem("token")) {
      return true;
    }
  }

  getToken() {
    return localStorage.getItem("token");
  }

  getUser(){
    return JSON.parse(localStorage.getItem("datos"));
  }

  logOut() {
    localStorage.removeItem("token");
    localStorage.removeItem("datos");
    this.router.navigate(["/home"]);
  }

  setToken(token) {
    localStorage.setItem("token", token);
  }

  setUser(user) {
    localStorage.setItem("datos", JSON.stringify(user));
  }
}

1 respuesta 1

0

Te sale como undefined por que no has accedido al localstorage. Tienes que crear un guard y ponerlo en todas las rutas para que compruebe si el usuario esta logueado, que dicho de otra manera es comprobar si el localstorage tiene el item designado como usuario en tu caso.

Te dejo un ejemplo de un guard que he implementado. No es muy limpio, pero te puede ayudar a entender el concepto:

export class VerificaTokenGuard implements CanActivate {
  constructor(
    public _usuarioService: UsuarioService, 
    public router: Router,
    public msjSErvice:ManejoDeMensajesService
    ) {}
  canActivate(): Promise<boolean> | boolean {
    //Mi usuario viene encriptado en el token, por eso siempre
    // que se lee una ruta verifico que exista el item
    const token = localStorage.getItem('token')
    if (!token) {
      
      this.msjSErvice.toast.info('No hay un token. Necesitas loguearte')
      this.navegarAlLogin()
      return false
    }
    // Recuperar la fecha de expiración del token.
    if (jwtHelper.isTokenExpired(token)) {
      this.navegarAlLogin()
      this._usuarioService.msjService.informar('Sesion caduca')
      return false
    }

    return this.verificaRenueva(jwtHelper.getTokenExpirationDate(token))
  }

  verificaRenueva(fechaExp: Date): Promise<boolean> {
    // tslint:disable-next-line:no-shadowed-variable
    return new Promise((resolve, reject) => {
      const ahora = new Date()

      ahora.setTime(ahora.getTime() + 1 * 60 * 60 * 1000)

      if (fechaExp.getTime() > ahora.getTime()) {
        resolve(true)
      } else {
        this._usuarioService.renuevaToken().subscribe(
          () => {
            resolve(true)
          },
          () => {
            this.msjSErvice.toast.info('No se pudo renovar la sesión. Inicia de nuevo.')
            this.router.navigate(['/login'])
            reject(false)
          }
        )
      }
    })
  }

  navegarAlLogin() {
    this._usuarioService.logout()
    localStorage.clear()
    this.router.navigate(['/login'])
  }


Esto lo vas a poner en tus routes de esta manera:

  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [VerificaTokenGuard, PermisosGuard],
    data: {
      titulo: 'Dashboard',
      permissions: permisosKeysConfig.login
    }
  }

Explicacion

Angular trabajo bajo el esquema single page application que no es otra cosa que evitar recargar la ventana completa, y solo cargar los elementos que necesites. Cuando recargas tu ventana pierdes todos los datos en memoria (incluido los datos de tu servicios) pero no tu localstorage. El problema es que tu aplicación no comprueba el local storage en cualquier ruta que se recargue el navegador y por esa razón todas las variables relacionadas a tu gestión de usuarios están como undefined.

Espero no confundirte mas, pero en guard que te presento, vez de leer un token, por lo pronto solo lee a tu usuario. Eso deberia solucionar el problema.

1
  • Gracias por tu respuesta, ya tenía un guard, tampoco me funciono, la verdad ya no se que hacer. Pero igual, gracias por la ayuda el 13 may. 2020 a las 23:25

Tu Respuesta

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

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