Firebase 身份验证登录但成功登录后重定向到主页失败（服务器响应 200）

Posted 2023-03-16

【中文标题】Firebase 身份验证登录但成功登录后重定向到主页失败（服务器响应 200）

【英文标题】：Firebase auth logs in but redirect to home fails after successfully logged in (server response 200)

【发布时间】：2019-09-12 11:02:42

【问题描述】：

我正在开发一个基于 firebase 的 vue 应用程序，该应用程序应在成功登录后将用户重定向到主页。但我却没有按照应有的方式定向到主页视图。登录成功后仍然卡在登录页面。

this.$router.replace 根本不起作用，我不知道为什么。

main.js

import Vue from "vue";
import firebase from "firebase";
import App from "./App.vue";
import router from "./router";
import swalPlugin from './plugins/VueSweetalert2';

Vue.config.productionTip = false;

let app ='';

firebase.initializeApp( 
  apiKey: "#",
  authDomain: "#",
  databaseURL: "#",
  projectId: "#",
  storageBucket: "#",
  messagingSenderId: "#"
);

Vue.use(swalPlugin);

firebase.auth().onAuthStateChanged(() => 
  if (!app) 
    app = new Vue(
      router,
      render: h => h(App)
    ).$mount("#app");
  
);

路由器.js

import firebase from 'firebase';
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import SignUp from "./views/SignUp.vue";

Vue.use(Router);

const router = new Router(
  routes: [
    
      path: '*',
      redirect: '/login'
    ,
    
      path: '/',
      redirect: "/login"
    ,
    
      path: '/login',
      name: 'login',
      component: Login
    ,
    
      path: '/sign-up',
      name: 'signUp',
      component: SignUp
    ,
    
      path: '/home',
      name: 'home',
      component: Home,
      meta: 
        requiresAuth: true
      
    
  ]
);

router.beforeEach ((to, from, next) => 
  const currentUser = firebase.auth.currentUser;
  const requiresAuth = to.matched.some (record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('home');
  else next();

);

export default router;

Login.vue 视图

<template>
    <form autocomplete="off">
        <div class="login">
            <h1>Login</h1>
            <p>Sign in to stay updated with the latest news</p>
            <hr>

            <input type="text" placeholder="Email" v-model="email">

            <input type="password" placeholder="Enter Password" v-model="password">

            <hr>
            <button @click="login">Login</button>
            <p>Don't have an account yet? Create one <router-link to="/sign-up">here</router-link></p>

        </div>
    </form>
</template>

<script>
import firebase from 'firebase';
import Swal from 'sweetalert2';


export default 
    name: 'login',
    data() 
        return 
          email: '',
          password: ''
        
    ,
    methods: 
        login: function()
            firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
              (user) => 
                this.$router.replace('home');
              ,
              (err) => 
                Swal.fire(
                  type: 'error',
                  title: 'An error occurred...',
                  text: err.message
                )
              
            );
        
    

</script>

Home.vue 视图

<template>
  <div class="home">
    <img  src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import firebase from "firebase";
import HelloWorld from "@/components/HelloWorld.vue";

export default 
  name: "home",
  components: 
    HelloWorld
  ,
  methods: 
    logout: function()
      firebase.auth().signOut().then(() => 
        this.$router.push (name: 'login')
      )
    
  
;
</script>

【参考方案1】：

使用 router.push()

this.$router.push(name: 'home');

让我知道它是否有效！

【讨论】：

我试过 this.$router.push(name: 'SignUp') 并且它有效，登录后它会重定向我的注册页面。我认为主页中的某些内容阻止了我

Home 组件看起来不错。当 Promise 在 Login.vue 的登录功能中解决时，你能放一个记录器吗？它记录了什么 - firebase.auth.currentUser

找到了.. 我在 router.js 中将 const currentUser = firebase.auth.currentUser 更改为 const currentUser = firebase.auth().currentUser .. 不敢相信在这上面花了多少时间。 .

太棒了！我也错过了。