Как решить наблюдаемую проблему с аутентификацией входа в Firebase в Angular

Question

В моем коде есть глупая ошибка, из-за которой мне нужно войти два раза, чтобы войти в систему.Несмотря на то, что он работает в первый раз, потому что после первого входа в систему он выводит на консоль пользовательские данные, которые можно наблюдать private user: Observable<firebase.User>; private userDetails: firebase.User = null;

Моя другая логика в методе входа в систему не работает, например:

if (this.userDetails) {
email = this.userDetails.email;
console.log("hello im user" + " " + email);

в первый раз это дает мне неопределенное значение, потому что похоже, что этот код вызывается до того, как наблюдаемое возвращает userDetails.Как этого избежать?Как обойти это?Вот мой Сервисный код аутентификации

export class AuthService {
  private user: Observable<firebase.User>;
  private userDetails: firebase.User = null;
  public loggedIn = false;



  constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
    this.user = _firebaseAuth.authState;
    this.loggedIn = !!sessionStorage.getItem('user');

    this.user.subscribe(
        (user) => {
          if (user) {
            this.userDetails = user;

            console.log(this.userDetails);
          } else {
            this.userDetails = null;
          }
        }
      );
  }

  // Set current user in your session after a successful login
    setCurrentUser(email: string): void {
        sessionStorage.setItem('user', email);
        this.loggedIn = true;
    }

    // Get currently logged in user from session
    getCurrentUser(): string | any {
        return sessionStorage.getItem('user') || undefined;
    }

    isLoggedIn() {
    return this.loggedIn;
    }

  logUserIn(email, pass) {
    firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log("error" + error);
})
//var user = firebase.auth().currentUser;

if (this.userDetails) {
email = this.userDetails.email;
console.log("hello im user" + " " + email);

this.setCurrentUser(email);
 this.loggedIn = true;
} else {
console.log("not working");
}

this.router.navigate(['']);
}

До использования observable tho get userDetails я просто использовал var user = firebase.auth().currentUser;, и он работал просто отлично.

Поэтому я ищу помощь, чтобы этот блок кода

if (this.userDetails) {
    email = this.userDetails.email;
    console.log("hello im user" + " " + email);

    this.setCurrentUser(email);
     this.loggedIn = true;

внутри logUserin() вызывался только после того, как userDetails observable возвращается.

Спасибо за помощь.

Answer 1

Вы должны поместить это выражение if в свою подписку, чтобы оно вызывало только один раз, когда пользователь вернулся.

this.user.subscribe(
        (user) => {
          if (user) {
            this.userDetails = user;

    email = this.userDetails.email;
    console.log("hello im user" + " " + email);

    this.setCurrentUser(email);
     this.loggedIn = true;

            console.log(this.userDetails);
          } else {
            this.userDetails = null;
          }
        }
      );