signInWithPopup promise在单击UI之前不会执行.catch。角度和Firebase

时间:2017-09-29 00:03:13

标签: javascript angular firebase promise firebase-authentication

我在使用AngularFireAuth提供的.signInWithPopup()方法时出现问题,您可以在此处看到更多内容:firebaseAuthReference

在我的auth.service.ts中,我有以下方法。

 signinWithFacebook2() {
        const provider = new firebase.auth.FacebookAuthProvider();
        return this.afAuth.auth.signInWithPopup(provider);
      }

afAuth已在auth的构造函数中注入:

constructor(private router: Router,
              private afAuth: AngularFireAuth){}

当用户点击login.component.ts(点击事件)中的按钮时,我会调用signinWithFacebook2()。

onFacebookLogin() {
    this.authService.signinWithFacebook2()
      .then(
        (res) => {
          this.authService.getTokenId();
          this.router.navigate(['/dashboard']);
        }
      )
      .catch(
        (err) => {
          this.showError = true;
          // TODO fix bug. this code isn't execute until I press the button again.
        }
      );
  }

当承诺得到解决时,一切正常,代码正确执行但是当完成拒绝时,代码不会被执行,直到我再次按下登录按钮。这是一种奇怪的行为。希望你能解决我的问题,如果不是,请发表评论。

2 个答案:

答案 0 :(得分:1)

尝试强制change detection出错。

  1. 添加导入:

    import { ChangeDetectorRef } from '@angular/core';
    
  2. 传递给构造函数的引用:

    constructor(private router: Router,
                private ref: ChangeDetectorRef,
                private afAuth: AngularFireAuth) {}
    
  3. 错误时强制更改检测:

    (err) => {
      this.showError = true;
      // TODO fix bug. this code isn't execute until I press the button again.
      this.ref.detectChanges();
    )
    

答案 1 :(得分:0)

从您提供的文档看起来,您必须将错误作为.then()函数的第二个参数捕获。

onFacebookLogin() {
    this.authService.signinWithFacebook2()
      .then(
        (res) => {
          this.authService.getTokenId();
          this.router.navigate(['/dashboard']);
        },
      (err) => {
          this.showError = true;
          // TODO fix bug. this code isn't execute until I press the button again.
        }
      );
  }