javascript - Firebase "signInWithEmailAndPassword"函数 promise 触发两次

Question

无论成功与否，我的 Firebase 函数 signInWithEmailAndPassword() 的 promise 都会触发两次而不是一次。

所以在我的例子中，我看到了两次相同的 alert()，这取决于它是否成功登录。

我想不出 promise 触发两次的原因。任何建议将不胜感激。

这是我的代码:

<template>
  <div class="login">
    <v-form @submit="signIn">
      <v-text-field
        v-model="email"
        label="Email"
        placeholder="test@test.com"
        box
      >
      </v-text-field>

      <v-text-field
        v-model="password"
        label="Password"
        placeholder="password"
        :type="'password'"
        box
      >
      </v-text-field>

      <v-btn type="submit" @click="signIn">
        Sign In
      </v-btn>
    </v-form>
  </div>
</template>

<script>
import firebase from 'firebase';

export default {
  name: 'Login',
  data: function() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signIn: function() {
      firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(
        () => {
          firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
            (user) => {
              alert('Yep');
            },
            (error) => {
              alert(error.message);
            }
          );
        })
        .catch((error) => {
          console.log('Oops. ' + error.message);
        });
    }
  }
}
</script>

Answer 1

您在表单 和提交按钮中调用了两次signIn。你应该只有一个:

<v-form @submit="signIn">
  <v-text-field
    v-model="email"
    label="Email"
    placeholder="test@test.com"
    box
  >
  </v-text-field>

  <v-text-field
    v-model="password"
    label="Password"
    placeholder="password"
    :type="'password'"
    box
  >
  </v-text-field>

  <v-btn type="submit">
    Sign In
  </v-btn>
</v-form>