Firebase signInWithEmailAndPassword在vue.js中不起作用

我正在尝试使该标志部分在我的Web应用程序上工作，但工作不正常。每当我按下登录按钮时，页面就会刷新并且url将使用凭据更新并停留在同一页面上，或者路由器将被推送并转到“主页”而无需登录用户。

我还遵循了该指南作为参考：https : //blog.logrocket.com/vue-firebase-authentication/

奇怪的是，注册部分工作正常。

登录

<div class="card-body">
          <form>
            <!-- email -->
            <div class="input-group form-group">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-user"></i></span>
              </div>
              <input id="email" type="email" class="form-control" name="email" placeholder="e-mail" value required autofocus v-model="form.email" />
            </div>
            <!-- password -->
            <div class="input-group form-group">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-key"></i></span>
              </div>
              <input id="password" type="password" class="form-control" name="password" placeholder="password" required v-model="form.password" />
            </div>
            <!-- error -->
            <div v-if="error" class="alert alert-danger animated shake">{{ error }}</div>
            <br />

            <!-- login -->
            <div class="form-group d-flex justify-content-between">
              <div class="row align-items-center remember"><input type="checkbox" v-model="form.rememberMe" />Remember Me</div>
              <input type="submit" @click="submit" value="Login" class="btn float-right login_btn" />
            </div>
          </form>
        </div>

SignIn.vue中的脚本

<script>
  import firebase from 'firebase';

  export default {
    data() {
      return {
        form: {
          email: '',
          password: '',
          rememberMe: false
        },
        error: null
      };
    },
    methods: {
      submit() {
        firebase
          .auth()
          .signInWithEmailAndPassword(this.form.email, this.form.password)
          .catch(err => {
            this.error = err.message;
          })
          .then(data => {
            this.$router.push({ name: 'home' });
          });
      }
    }
  };
</script>

Store.js

import Vue from 'vue';
import Vuex from 'vuex';

import profile from './modules/profile';
import authenticate from './modules/authenticate';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    profile,
    authenticate
  }
});

商店中的Authenticate.js

const state = {
  user: {
    loggedIn: false,
    data: null
  }
};

const getters = {
  user(state) {
    return state.user;
  }
};

const mutations = {
  SET_LOGGED_IN(state, value) {
    state.user.loggedIn = value;
  },
  SET_USER(state, data) {
    state.user.data = data;
  }
};

const actions = {
  fetchUser({ commit }, user) {
    commit('SET_LOGGED_IN', user !== null);
    if (user) {
      commit('SET_USER', {
        displayName: user.displayName,
        email: user.email
      });
    } else {
      commit('SET_USER', null);
    }
  }
};

export default {
  state,
  mutations,
  actions,
  getters
};