Polymer firebase .. 使用密码和电子邮件进行身份验证

Question

我有一个可以成功登录用户的功能。

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;

   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(function() {
      // Sign-in successful.
      //this._animateView(); **returns undefined**
    }, function(error) {
      // An error happened.
    //     // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        // this._animateErrorView(); **returns undefined**
    });

  },

我想要的是在用户登录成功时调用函数this._animateView();，在出现错误时调用this._animateErrorView()。

如果我尝试这样做 returns undefined.. 我该如何解决这个问题

Answer 1

回调函数中this的含义不同

您可以通过多种方式解决此问题，但这里有两种。

在另一个变量中捕获 this 的值

您无法阻止 this 获取新值，因为这就是 JavaScript 闭包的工作方式。但是您可以做的是用您需要的 value 定义一个不同的值。变量的惯用名称是 self，尽管我个人更喜欢更具描述性的名称：

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;
   var self = this;    
   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(function() {
        self._animateView();
    }, function(error) {
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        self._animateErrorView();
    });
  }

使用粗箭头函数

ES6 定义了一种使用 so-called fat arrows (=>) 声明函数的新方法。除了稍微减少代码外，这些确保 lambda/callback 中 this 的值保持不变。所以

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;
   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(() => {
        this._animateView();
    }, (error) => {
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        this._animateErrorView();
    });
  }

Answer 2

除了@Frank van Puffelen 的回答之外，聚合物开发团队还使用了另一种方法：

_login: function() {
   var email = this.$.emailvalue.value;
   var password = this.$.passwordvalue.value;

   return this.$.authenticate.signInWithEmailAndPassword(email, password).then(function() {
      // Sign-in successful.
      //this._animateView(); **returns undefined**
    }.bind(this), function(error) {
      // An error happened.
    //     // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message; 
        console.log(errorMessage);
        // this._animateErrorView(); **returns undefined**
    }.bind(this));

  },

所以基本上你在最后的每个回调中添加 .bind(this)。

Polymer firebase .. 使用密码和电子邮件进行身份验证

Polymer firebase.. Authentication with password and email

javascript

firebase

polymer-1.0

polymerfire

firebase-polymer

在另一个变量中捕获 this 的值

使用粗箭头函数