1

lo que pasa es que tengo el siguiente problema con mi código de angular y me gustaría saber como hacerlo mejor o arreglar estos errores. Tengo un login que lo que hace es guardar el token de autenticación en el localstorage, al igual que el usuario, rol y correo. Lo que busco con esto es que al iniciar sesion, me salga una alerta de bienvenida con el nombre y el rol, hasta ahora todo normal, funciona muy bien hasta ahi, pero el problema es que al hacer eso, salen demasiados errores, debido a que quiero poner el nombre y el rol en el navbar. Son (29) errores de lo mismo:

introducir la descripción de la imagen aquí

Al darle F5 a la página pues los errores desaparecen y pues ya en la página de inicio me sale el nombre de usuario y su rol en el navbar, me gustaría saber como evitar estos errores, otro problema que se me presenta es que al cerrar sesión, los datos se eliminan del localstorage, pero al volver a iniciar sesión con un usuario nuevo, al no darle f5 a la página, sigue saliendo el mismo usuario que logeado anteriormente.

Este es mi codigo al iniciar sesion

    signIn() {
    this.authService.signIn(this.user).subscribe(
      (res) => {
        const datosUser = {
          id: res.datos._id,
          email: res.datos.email,
          nombre_usuario: res.datos.nombre_usuario,
          rol: res.datos.rol,
        };
        this.authService.setToken(res.token);
        //localStorage.setItem("token", res.token);
        this.authService.setUser(datosUser);
        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",
        });
      }
    );
  }

Aqui estan los set's

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

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

Luego trato de traer esos datos a app-component.html

export class AppComponent {
  user: any;
  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.user = JSON.parse(localStorage.getItem("datos"));
  }
}

Y en el HTML tengo esto

    <li>
                <a class="nav-link" routerLink="/profile" routerLinkActive="active">{{user.nombre_usuario}}</a>
              </li>
              <li class="nav-link">
                Rol: {{user.rol}}
   </li>

Estado actual del error:

Logre que al iniciar sesión la página carga el nombre y el usuario correcto sin mostrar ningún error, al igual que cuando se cierra sesión y se vuelve abrir. Resulta que ahora el nuevo problema es que cuando doy F5, otra vez todo se daña y es como si nada estuviese definido. Este es el código que tengo actualmente.

APPCOMPONENT:

public static updateUserStatus: Subject<boolean> = new Subject();
  user: any;
  constructor(private authService: AuthService) {

      AppComponent.updateUserStatus.subscribe((res) => {
        this.user = JSON.parse(localStorage.getItem("datos"));
      });

  }

Servicio:

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

Componente login:

signUp(form: NgForm) {
    return this.authService.signUp(this.user).subscribe(
      (res) => {
        this.authService.setUser(res.datos);
        this.authService.setToken(res.token);
        this.router.navigate(["/home"]);
        AppComponent.updateUserStatus.next(true);
        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",
        });
      }
    );
  }

Controlador login:

userController.logInUser = async (req, res) => {
  const { email } = req.body;
  const user = await model_user.findOne({ email });
  if (!user) {
    return res.status(409).send("El correo no existe");
  } else {
    const match = await bcrypt.compare(req.body.password, user.password);
    if (match) {
      const datos = {
        email: user.email,
        nombre_usuario: user.name,
        rol: user.rol,
      };
      const token = jwt.sign({ _id: user._id }, secretKey, {
        expiresIn: 60 * 60 * 24, // expires in 24 hours
      });
      return res.status(200).json({ datos, token });
    } else {
      return res.status(409).send("Contraseña erronea");
    }
  }
};
3
  • Como side note, yo te recomendaría por seguridad no almacenar el token en local storage. el 12 may. 2020 a las 19:06
  • Estaría bien saber qué hace this.authService.signIn(this.user) y que devuelve realmente. el 12 may. 2020 a las 19:08
  • Hola, en la edición de la pregunta mostré que hace signIn, en cuanto al controlador, no sé si sirva, lo colocare en la pregunta. el 12 may. 2020 a las 19:23

2 respuestas 2

1

Cuando seteas un suscribe tienes esta sintaxis:

servicio().suscribe(datos => metodo(datos), 
                    error => manejoError(error), 
                    completado => metodoCuandoElSuscribeTermine()
)

Si quieres manejar errores en el suscribe debes implementar tu metodo que controla errores, despues del primer metodo que implementas al suscribe. Tambien los datos del usuario te recomiendo guardarlo en un subject en tu servicio y lo vas a poder consumir desde cualquier componente. En cuanto al token te recomiendo guardarlo en las cookies porque puedes setearle un tiempo de caducidad

8
  • Hola, gracias por tu respuesta, acabe de editar mi pregunta y mostré completamente el signin(), gracias por tus recomendaciones, soy nuevo en angular, se me olvido aclararlo, podrías explicarme como es lo del subject? el 12 may. 2020 a las 16:30
  • Otra pregunta que se me acabo de ocurrir, lo recomendable seria poner el navigate() en la parte de completado? cuando el subscribe termine y guarde los datos, me imagino el 12 may. 2020 a las 16:49
  • Claro los observable, subject, etc. son funcionalidades de rxjs un ejemplo de como implementarlo en tu proyecto seria asi private datosUsuario$ = new Subject<UsuarioModel[]>(); usuarios:UsuarioModel[] =[] obtenerUsuarioGuardado(): Observable<UsuarioModel[]>{ return this.datosUsuario$.asObservable(); } establecerUsuario(usuario:UsuarioModel){ this.usuarios=[] this.usuarios.push(usuario) this.datosUsuario$.next(this.usuarios) } limpiarUsuarios(){ this.usuarios=[] this.datosUsuario$.next(this.usuarios) }
    – danRivC
    el 12 may. 2020 a las 16:51
  • No porque si da error igual te va a redirigir al home, aqui tienes un ejemplo de la documentacion de angular const myObservable = of(1, 2, 3); // Create observer object const myObserver = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), complete: () => console.log('Observer got a complete notification'), };
    – danRivC
    el 12 may. 2020 a las 16:52
  • Oye amigo, genial, muchas gracias la verdad, no sabia sobre los subject y acabo de arreglar mi problema <3 el 12 may. 2020 a las 17:40
0

Varias cosas:

AppComponent: Lee únicamente los datos 1 vez, en onInit, y lo lee del local storage.

El login se realiza después, y se almacena todo en localStorage (que es durable pese al F5), por eso al darle a F5 ves al usuario.

Lo que yo te recomendaría sería tener un sito claro donde guardas el "estado", al menos parcial, que tiene tu user y token. Llamemosle por ejemplo "AuthStateService"

por ejemplo: AuthStateService Puedes añadir métodos para setear el user, incluso leerlo del localStorage si queires desde el constructor, pero no te lo recomiendo.

@Injectable
export class AuthStateService {
  public user$: Observable<User>;
  private userSubject$: ReplaySubject<User>;

  constructor(private authService: AuthService) {
    this.user$ = userSubject$.asObservable();
    this.userSubject$ = new ReplaySubject<User>(1);
  }

  public signIn(email: string, password: string): Observable<User> {
    return this.authService.signIn({ email, password })
    .pipe(tap(user => { this.user = user; });
  }
}

AppComponent

Recibira el user únicamente cuando alguien haga login, sino, será null. Al hacer F5 será null.

@Component({
 ...
})
export class AppComponent implements OnInit, OnDestroy {
  public user: User = null;

  private subscriptions = new Subscription();

  constructor(private authStateService: AuthStateService) {}

  public ngOnInit() {
    this.subscriptions.add(
      this.authStateService.user$.subscribe(user => {
        this.user = user;
      })
    );
  }

  public ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
}

Y en algún lugar...

  this.authStateService.signIn(email, password)
  .subscribe(user => {
    ...
   });

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.