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

Posted 2023-02-22

【中文标题】页面刷新时会话关闭 - vue js Firebase

【英文标题】：Session closed on page refresh - 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

Login.vue：

<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>

我该如何解决？

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

【参考方案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')
    
)