页面刷新时会话关闭 - vue js Firebase答案

【问题标题】：Session closed on page refresh - vue js Firebase页面刷新时会话关闭 - vue js Firebase
【发布时间】：2021-10-18 00:39:16
【问题描述】：

我正在尝试创建一个登录系统，但是当我进入仪表板然后刷新页面时，它会关闭会话并将我返回到 / 登录

这是我的 main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/bootstrap.js'
import firebase from 'firebase'

createApp(App).use(store).use(router).mount('#app')

let app = null

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

这是来自路由器的 Index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import firebase from 'firebase'
import Login from '@/views/Auth/Login'
import Register from '@/views/Auth/Register'
import Dashboard from '@/views/Dashboard.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/Register',
    name: 'Register',
    component: Register
  },
  {
    path: '/Login',
    name: 'Login',
    component: Login
  },
  {
    path: '/Dashboard',
    name: 'Dashboard',
    meta: {
      requiresAuth: true
    },
    component: Dashboard
  },
]




const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes

  
});


router.beforeEach((to, from, next) => {
  if (to.matched.some(ruta => ruta.meta.requiresAuth)) {
    const user = firebase.auth().currentUser;
    if (user) {
      next();
    } else {
      next({name: 'Login'})
    }
  } else {
    next();
  }
})

export default router

<template>
    <div class="container">
       <form v-on:submit.prevent="login" class="col-lg-3 offset-lg-4 ">
   <div class="row justify-content-center  m-5">
     <h3>Acceder</h3>
     <label class="mt-5" for="">Correo electrónico</label>
     <input type="e-mail" class="form-control mt-2" v-model="email">
     <label class="mt-4" for="">Contraseña</label>
     <input type="password" class="form-control" v-model="password">
     <button type="submit" class="btn btn-outline-success col-lg-6 mt-4">Acceder</button>
   </div>
   <div class="alert alert-danger" role="alert" v-if="error">
       {{error}}
</div>
 </form>
 
    </div>
</template>

<script>
import db from '@/firebase/init.js'
import firebase from 'firebase'
export default {
    name:'Login',
    data() {
        return {
            email: '',
            password:'',
            error: ''
        }
    },
    methods: {
        login() {
            this.error = ''
            if(this.email && this.password) {
                // Enviamos formulario
                firebase.auth().signInWithEmailAndPassword(this.email, this.password)
                .then(user => {
                    this.$router.push({name: 'Dashboard'})
                }).catch(err => {
                    this.error = err.message
                })
            } else {
                this.error = "Todos los campos deben de tener valores"
            }
        }
    },
}
</script>

我该如何解决？

我尝试了很多方法，阅读了各种网站，但我找不到解决方案

【问题讨论】：

标签： javascript firebase vue.js vuex

【解决方案1】：

您的身份验证状态侦听器似乎错误。你确定它不应该是这样的吗：

firebase.auth().onAuthStateChanged((user) => {
    if (!user) {
        new Vue ({
            router,
            render: h => h(App)
        }) .$mount('#app')
    }
    else {
        // something similar to this: this.$router.push({name: 'Dashboard'})
    }
})

【讨论】：