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

Posted 2023-02-22

【中文标题】带有firebase的Vue js不切换页面[重复]

【英文标题】：Vue js with firebase not switching pages [duplicate]

【发布时间】：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>

【参考方案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 方法，并在进入每个页面之前检查身份验证状态而不是这种方法，并且所有这些都在一个地方，而不是为每个页面分开然后你可以做一些事情基于每个州。