时间戳

首页 > 解决方案 > 带有firebase的Vue js不切换页面

javascript - 带有firebase的Vue js不切换页面

问题描述

所以我的问题是，当我使用firebase登录并且我的挂载功能应该切换组件时，我尝试了很多东西，但没有任何效果。我只需要一种方法来让我的路由器在我登录后切换页面。

<template>
  <div class="vue-tempalte" id="regForm">
    <form>
      <h1 id="middle">Sign In</h1>

      <div class="form-group">
        <label>Email address</label>
        <input type="email" id="email" v-model="email" required />
      </div>

      <div class="form-group">
        <label>Password</label>
        <input type="password" id="password" v-model="password" required />
      </div>

      <button type="submit" @click="login" class="button is-light" id="btn1">
        Sign In
      </button>
    </form>
  </div>
</template>

<style scoped>
</style>

<script>
import firebase from "firebase";
export default {
  name: "login",
  data() {
    return {
      email: "",
      password: "",
    };
  },
  mounted: function () {
    if (firebase.auth().currentUser) this.$router.replace("/HeaderLoggedIn");
  },
  methods: {
    login: function () {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then((user) => {
          console.log(user.user);
        });
    },
  },
};
</script>

标签： javascriptfirebasevue.jsfirebase-authentication

解决方案

问题出在这段代码中：

  mounted: function () {
    if (firebase.auth().currentUser) this.$router.replace("/HeaderLoggedIn");
  },

现在，您正在检查安装组件时用户是否已登录。这发生一次，而用户被多次验证，因为它是一个异步操作。

您将希望 *监听身份验证状态更改，如有关确定登录用户的文档中的第一个片段所示：

  mounted: function () {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        this.$router.replace("/HeaderLoggedIn");
      }
    });
  },

推荐阅读