Question

我有一个Angular4项目并使用AngularFire2 4实现Auth！

在我的登录表单中，我有一个调用登录功能的按钮：

login() {
this.afAuth.auth.signInWithEmailAndPassword(this.model.email, 
this.model.password).then(
    (success) => {
this.afAuth.auth.currentUser.getIdToken().then(function (token) {
      //console.log(token);
localStorage.setItem("JwtToken", token);
})
    }).catch(
    (err) => {
        //this.error = err;
    });
       this.dataService.gettestToken();
}




//this is the Function in the Dataservice 
public gettestToken(){
console.log(localStorage.getItem('JwtToken'));
}

登录后，我在localStorage中写了IdToken，以便以后使用它们访问ASP.NET WebAPI数据....

我现在的问题是：我可以在localStorage中写出正确的IDToken 但是当我在Dataservice中调用函数getTestToken时用于调试console.log我变成没有令牌返回...只有空。

但疯狂的事情就是当我点击第二个登录按钮时然后我回到了令牌！

我必须始终单击2次登录按钮才能成为我的令牌...

但当我锁定本地存储下的开发人员工具时是令牌通过第一次点击登录按钮编写....

有人知道我的问题在哪里或者这是一些错误吗？

Answer 1

您在两个异步功能之外调用this.dataService.gettestToken();。

gettestToken()返回null，因为signInWithEmailAndPassword没有返回承诺，也没有getIdToken()。

您需要this.dataService.gettestToken()从.then()移动getIdToken()，如下所示：

login(__this = this) {
  this.afAuth.auth.signInWithEmailAndPassword(this.model.email, 
    this.model.password).then((success) => {
      this.afAuth.auth.currentUser.getIdToken().then(function (token) {
        //console.log(token);
        localStorage.setItem("JwtToken", token);
        // MOVE FUNCTION HERE ******************
        __this.dataService.gettestToken(); // <--------
      })
    }).catch((err) => {
    //this.error = err;
    });
}




//this is the Function in the Dataservice 
public gettestToken(){
  console.log(localStorage.getItem('JwtToken'));
}

编辑：请注意，我必须在login()函数中添加一个参数：__this = this。这是因为当this在promise中返回时this不是指类。

AngularFire2 4令牌只能通过第二次调用

1 个答案: