执行块后捕获 Firebase 创建用户错误

Question

我的Vue 应用中有一个注册页面。在此页面中，我接受用户输入并在验证后将用户添加到firebase auth。如果这成功，我希望页面导航到登录页面。她是我的注册页面：

<template>
  <div class="signup container">
      <form @submit.prevent="signup" class="card-panel">
          <h2 class="center teal-text">Signup</h2>

          <div class="field">
              <label for="firstName">First Name:</label>
              <input type="text" name="firstName" v-model="firstName">
          </div>
          <p class="red-text center" v-if="firstNameFeedback"> {{firstNameFeedback}} </p>

          <div class="field">
              <label for="lastName">Last Name:</label>
              <input type="text" name="lastName" v-model="lastName">
          </div>
          <p class="red-text center" v-if="lastNameFeedback"> {{lastNameFeedback}} </p>

          <div class="field">
              <label for="phone">Phone number:</label>
              <input type="tel" name="phone" v-model="phone">
          </div>
          <p class="red-text center" v-if="phoneFeedback"> {{phoneFeedback}} </p>

          <div class="field">
              <label for="email">Email:</label>
              <input type="email" name="email" v-model="email">
          </div>
          <p class="red-text center" v-if="emailFeedback"> {{emailFeedback}} </p>

          <div class="field">
              <label for="password">Password:</label>
              <input type="password" name="password" v-model="password">
          </div>
          <div class="field">
              <label for="repassword">Retype Password:</label>
              <input type="password" name="repassword" v-model="rePassword">
          </div>

          <p class="red-text center" v-if="rePasswordFeedback"> {{rePasswordFeedback}} </p>
          <div class="field center">
              <button class="btn deep-teal">Signup</button>
          </div>
      </form>
  </div>
</template>

<script>
import db from '@/firebase/init'
import firebase from 'firebase'

export default {
    name: 'Signup',
    data(){
        return{
            firstName: null,
            firstNameFeedback: null,
            lastName: null,
            lastNameFeedback: null,
            phone: null,
            phoneFeedback: null,
            email: null,
            password: null,
            rePassword: null,
            emailFeedback: null,
            passwordFeedback: null,
            rePasswordFeedback: null
        }
    },
    methods:{
        signup(){
            if (this.firstName == null) {
                this.firstNameFeedback = "First name is required"
            }
            if (this.lastName == null) {
                this.lastNameFeedback = "Last name is required"
            }
            if (this.phone == null) {
                this.phoneFeedback = "Phone number is required"
            }
            if (this.email == null) {
                this.emailFeedback = "Email is required"
            }
            if (this.password == null) {
                this.passwordFeedback = "Password is required"
            }
            if (this.password != this.rePassword) {
                this.rePasswordFeedback = "Passwords do not match"
            }
            if (this.firstName && this.lastName && this.email && this.phone && this.password && this.rePassword && this.password == this.rePassword) {
                this.firstNameFeedback = null
                this.lastNameFeedback = null
                this.emailFeedback = null
                this.phoneFeedback = null
                this.passwordFeedback = null
                this.rePasswordFeedback = null

                firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(
                    cred => {
                        db.collection('admin').doc(cred.user.uid).set({
                            admin: this.$route.params.admin,
                            email: this.email,
                            fname: this.firstName,
                            phone: this.phone,
                            surname: this.lastName,
                            'user.uid': cred.user.uid
                        })
                    }
                ).catch(
                    err => {
                        console.log(err.message)
                        this.rePasswordFeedback = err.message
                    }
                ).then(
                    this.$router.push({name: 'Login'})
                )
            }
        }
    }
}
</script>

<style>
    .signup{
        max-width: 600px;
        margin-top: 60px;
    }
    .signup h2{
        font-size: 2.4em;
    }
    .signup .field{
        margin-bottom: 16px;
    }
</style>

正如您在代码中看到的，我在 catch 块中捕获了 createUserWithEmailAndPassword() 方法的错误。但是页面首先路由到登录页面并执行捕获。我知道这一点，因为在应用程序进入登录页面后错误消息被记录到控制台。任何帮助将不胜感激。谢谢

Answer 1

你应该将异步set()方法返回的promise返回到正确的chain the promises，并适配最后一个不包含任何回调函数的then()块。

所以以下应该可以解决问题：

    firebase
      .auth()
      .createUserWithEmailAndPassword(this.email, this.password)
      .then((cred) => {
        return db.collection('admin').doc(cred.user.uid).set({
          admin: this.$route.params.admin,
          email: this.email,
          fname: this.firstName,
          phone: this.phone,
          surname: this.lastName,
          'user.uid': cred.user.uid,
        });
      })
      .then(() => {
        this.$router.push({ name: 'Login' });
      })
      .catch((err) => {
        console.log(err.message);
        this.rePasswordFeedback = err.message;
      });

---

请注意，您可能不需要重新路由到登录页面，因为对 createUserWithEmailAndPassword() 的调用实际上会在成功时登录用户，如文档中所述（“成功创建用户帐户后，此用户将也可以登录到您的应用程序”）。因此，您可以直接将其重新路由到“安全”页面。