Question

我在vue.js中定义了一个Login.vue组件，让我通过AWS Cognito将用户登录到我的应用程序。我使用___.authenticateUser()方法登录用户并与Cognito开始会话。以下是执行此操作的实际代码：

export default {
  name : 'Login',
  data: function() {
    return {
      errorMessageHidden: true,
      formHidden: false,
      errorMessage: '',
      email: '',
      password: ''
    }
  },
  methods: {
    showValuesToMe: function() {
      console.log(this.errorMessageHidden)
    },
    handleLogin: function() {
      const data = {
        Username: this.email,
        Pool: userPool
      }

      const cognitoUser =  new CognitoUser(data);

      const authenticationData = {
        Username : this.email,
        Password : this.password,
      };

      function showErrorMessage(err) {
        this.errorMessageHidden = false;
        this.errorMessage = err.message;
        console.log("The method got called... errorMessageHidden = " + this.errorMessageHidden);
      }

      const authenticationDetails = new AuthenticationDetails(authenticationData)

      cognitoUser.authenticateUser(authenticationDetails, {
        callback: showErrorMessage,
        onSuccess: function(result) {
          console.log('access token ' + result.getAccessToken().getJwtToken());
        },
        onFailure: function(err) {
          this.callback(err);
        }
      });
    },

    hideErorrMessage: function() {
      this.errorMessageHidden = true;
    }
  }
}

问题是，在组件的handleLogin()函数内，调用___.authenticateUser()时Cognito SDK调用onSuccess()或onFailure()，具体取决于AWS的身份验证结果

当我尝试修改onFailure()和errorMessageHidden时，errorMessage内的内容无法实现！这是因为onFailure()方法是回调方法和闭包。

要访问/修改这些值，我在闭包父母的范围内定义了function showErrorMessage(err) {...}。现在，我可以访问data中定义的值，但仍然无法修改它们。

任何人都可以弄明白我如何更改值以进行更改并在浏览器中显示错误。

Answer 1

您的问题是因为您使用function代替箭头函数来处理回调函数。使用function创建函数时，会创建一个新范围，而this不再是您的Vue组件。

你想这样做：

handleLogin: function() {
      const data = {
        Username: this.email,
        Pool: userPool
      }

      const cognitoUser =  new CognitoUser(data);

      const authenticationData = {
        Username : this.email,
        Password : this.password,
      };

      const showErrorMessage = err => {
        this.errorMessageHidden = false;
        this.errorMessage = err.message;
        console.log("The method got called... errorMessageHidden = " + this.errorMessageHidden);
      }

      const authenticationDetails = new AuthenticationDetails(authenticationData)

      cognitoUser.authenticateUser(authenticationDetails, {
        callback: showErrorMessage,
        onSuccess: result => {
          console.log('access token ' + result.getAccessToken().getJwtToken());
        },
        onFailure: err => {
          this.callback(err);
        }
      });
    }

使用箭头函数，您将保持调用它的函数的范围，因此如果您在Vue方法内并使用箭头函数，则箭头函数this内部仍将是Vue组件。

请注意，您不能将箭头函数用作methods对象的直接属性。这是因为Vue需要调用绑定到this的Vue组件的函数，这是箭头函数无法完成的。但除此之外，您可能希望尽可能地开始使用箭头功能，它们是我最喜欢的ES5功能之一。

组件变量不能在vue.js中的回调方法中修改

1 个答案: