1

Tengo un servicio el cual chequea con un webservice la validez del usuario, y de ser valido lo guarda en el localstorage.

  public login(username: string, password: string) {
    const url = this.baseUrl + '/logincheck';
    this.http.post<User>(url, {username: username, password: password}).subscribe(
      currentUser => {
        currentUser.authData = window.btoa(username + ':' + password);
        localStorage.setItem('currentUser', JSON.stringify(currentUser));
      }
    );
  }

Quisiera poder devolver un observable, el cual al suscribirme, me avise cuando todo el proceso termino (es decir, chequear el usuario con el webservice, completar el authData y guardar el usuario en el localSotrage).

¿Es posible?

1 respuesta 1

2

Tienes al menos dos opciones para devolver el valor del usuario:

  • Devuelve el observable y suscríbete a él en otro componente.
public login(username: string, password: string) {
  const url = this.baseUrl + '/logincheck';
  return this.http.post<User>(url, {username: username, password: password}).pipe(
    tap(currentUser => {
      currentUser.authData = window.btoa(username + ':' + password);
      localStorage.setItem('currentUser', JSON.stringify(currentUser));
    })
  );
}

// En el componente que haces login
this.authService.login(user, passwd).subscribe(user => {
  // Comprueba si el usuario se ha logueado
  if (user) { /* ... */ }
});
  • Usa un Subject. En mi opinión esto es mejor ya que te puedes suscribir a él desde varios componentes/servicios. Un subject es un observable que a su vez emite observables. Tiene un método .next() para emitir el siguiente valor. En este ejemplo devolvemos el currentUserSubject como observable mediante la variable currentUser:
// Servicio
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;

constructor(private http: HttpClient) {
  this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
  this.currentUser = this.currentUserSubject.asObservable();
}

public login(username: string, password: string) {
  const url = this.baseUrl + '/logincheck';
  return this.http.post<User>(url, {username: username, password: password})
  .pipe(
    tap(currentUser => {
      currentUser.authData = window.btoa(username + ':' + password);
      localStorage.setItem('currentUser', JSON.stringify(currentUser));
      // Emitir el siguiente valor
      this.currentUserSubject.next(currentUser);
    })
  );
}

// En el componente que haces login
this.authService.login(user, passwd).subscribe(user => { /* ... */ });

// En cualquier otro componente
this.authService.currentUser.subscribe(user => { /* ... */})

Mírate este tutorial, da una guía muy completa para montar autenticación en tu aplicación.

2
  • Muy buenas ambas soluciones, te hago una consulta ¿que hace tap?, porque habia visto una solucion parecida a la primera pero usando map. ¿Cual seria la diferencia entre ambos?
    – Niko
    Commented el 28 mar. 2019 a las 15:48
  • map aplica una función al valor, modificándolo si hace falta. Con tap puedes ver y usar los valores pero no modificarlos. Commented el 28 mar. 2019 a las 15:51

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.