Question

我在Vue.js中有一个简单的应用程序，用于验证Firebase中的现有用户。到目前为止，它可以工作，但是我想使用async并等待而不是然后呢？如何使用async和await重写逻辑？我查看了文档，但没有找到任何信息，这是我的代码：

<template>
    <div>
       <form @submit.prevent="userLogin">
            <h3>Sign In</h3>

            <div>
                <label>Email address</label>
                <input type="email"  v-model="user.email" />
            </div>

            <div>
                <label>Password</label>
                <input type="password"  v-model="user.password" />
            </div>

            <button type="submit" >Sign In</button>
        </form>
    </div>
</template>

<script>
import firebase from 'firebase'

export default {
    name: 'Login',
    data() {
    return {
      user: {   
        email: '',
        password: ''
      }
    };
  },
  methods: {
   userLogin() {
        firebase
        .auth()
        .signInWithEmailAndPassword(this.user.email, this.user.password)
        .then(() => {
            this.$router.push('/')
        })
        .catch((error) => {
          alert(error.message);
        });
    }
  }
}
</script>

Answer 1

将该属性定义为异步函数。记住使用function() {}而不是() => {}，否则会丢失this

的上下文

<script>
import firebase from 'firebase'

export default {
    name: 'Login',
    data() {
    return {
      user: {   
        email: '',
        password: ''
      }
    };
  },
  methods: {
   userLogin : async function () {
      try {
        await firebase.auth().signInWithEmailAndPassword(this.user.email, this.user.password)

        this.$router.push('/')
      }
      catch(e){
          alert(error.message);
      }
    }
  }
}
</script>

如何使用异步身份验证用户并在Firebase中等待

1 个答案: