javascript - 如何避免可观察的 Angular 延迟或确保仅当可观察准备好时才调用我的函数

Question

我有一个登录功能，它调用 Firebase SDK 方法来通过电子邮件进行身份验证。此 Firebase 方法返回 UserCredential 的非 null Promise，如 Firebase 文档中所述。因此，我使用 .then() 等待用户登录、通过身份验证，然后 console.log 他的信息并重定向到主页。不幸的是它不起作用。我在控制台中从 console.log(value.email); 得到未定义，从

不工作

if (this.userDetails) {
console.log("hello im user" + " " + email);
} else {
console.log("not working");
}

和errorTypeError:无法从以下位置读取未定义的属性“路由器”:

.catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log("error" + error);
    });

然后一两秒后，它终于开始工作，打印出 hello im user lajmis@mail.com from

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

    this.user.subscribe(
        (user) => {
          if (user && user.uid) {
            this.userDetails = user;
            var email = this.userDetails.email;
            console.log("hello im user" + " " + email);
            this.setCurrentUser(email);
            this.loggedIn = true;
            console.log(this.userDetails);

          } else {
            this.userDetails = null;
          }
        }
      );
  }

和this.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 && user.uid) {
            this.userDetails = user;
            var email = this.userDetails.email;
            console.log("hello im user" + " " + email);
            this.setCurrentUser(email);
            this.loggedIn = true;
            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).then(function(value) {

        console.log(value.email);
        this.router.navigate(['']);

    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log("error" + error);
    });
if (this.userDetails) {
console.log("hello im user" + " " + email);
} else {
console.log("not working");
}
}

Answer 1

logUserIn 是非阻塞的 - 因此工作流程将是；

• 调用构造函数
• 调用this.user.subscribe
• 调用logUserIn
• 调用firebase.auth().signInWithEmailAndPassword
• 调用if (this.userDetails)
• 接收来自 firebase.auth().signInWithEmailAndPassword 的响应
• 调用 .then(函数(值) {
• 调用this.router.navigate(['']);
• 接收来自this.user.subscribe的响应

因此，console.log 将输出notworking，几秒钟后，this.user.subscribe 收到user 对象。

路由器无法访问，因为您没有使用箭头函数。使用箭头函数来维护对this的访问。

也许可以尝试如下工作流程；

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

  this.user
    .subscribe(user => {
      console.log('constructor user: ' + user);
      this.updateUser(user);
    });
}

updateUser(user) {
  if (user && user.id) {
    this.userDetails = user;
    var email = this.userDetails.email;
    console.log("hello im user" + " " + email);
    this.setCurrentUser(email);
    this.loggedIn = true;
    console.log(this.userDetails);
  } else {
    this.userDetails = null;
  }
}

logUserIn(email, pass) {
  firebase.auth().signInWithEmailAndPassword(email, pass)
    .then(user => {
      console.log('logUserIn: ' + user);

      this.updateUser(user);

      this.router.navigate(['']);
    })
    .catch(error => {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log("error" + error);
    });
}

这样，logUserIn 和构造函数 都可以在从 Firebase 接收到用户对象时更新 userDetails。

它还可以避免您在设置 this.userDetails 之前重定向。