带有firebase的Vue js不切换页面[重复]答案

【问题标题】：Vue js with firebase not switching pages [duplicate]带有firebase的Vue js不切换页面[重复]
【发布时间】：2021-03-09 10:27:40
【问题描述】：

所以我的问题是，当我使用 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>

【问题讨论】：

标签： javascript firebase vue.js firebase-authentication

【解决方案1】：

问题出在这段代码中：

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

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

您将希望改为 *listen 以了解身份验证状态更改，如 determining the signed in user 文档中的第一个 sn-p 所示：

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

【讨论】：

【解决方案2】：

您可以尝试在您的 main.js 文件中设置一个全局 router.beforeEach 方法，并在进入每个页面之前检查身份验证状态而不是这种方法，并且所有这些都在一个地方，而不是为每个页面分开然后你可以做一些事情基于每个州。

【讨论】：