Firebase + Vue : Disconnected at refresh despite setting persistence

Question

我正在使用 Vue 和 firebase 来构建身份验证机制。每次刷新页面时，身份验证都会被删除，我被重定向到登录页面。
我试过 setPersistence(firebase.auth.Auth.Persistence.SESSION)根据 documentation .我也实现了这个reddit thread的一些技巧.我仍然被重定向，我注意到在刷新时，auth.onAuthStateChanged((user) => {})回调有 user = null .
我有点卡住了。如果这是一个新手问题，请道歉。
firebase.js

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

const firebaseConfig = {
  apiKey: process.env.VUE_APP_API_KEY,
  ...
};

firebase.initializeApp(firebaseConfig)

// utils
const db = firebase.firestore()
const auth = firebase.auth()
auth.setPersistence(firebase.auth.Auth.Persistence.SESSION)


// export utils/refs
export {
  db,
  auth
}

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import router from './router/index'
import { store } from './store'
import { auth } from './firebase'

Vue.config.productionTip = false

let app

auth.onAuthStateChanged((user) => {
  if (!app) {
    app = new Vue({
      router,
      store,
      vuetify,
      render: h => h(App)
    }).$mount('#app')
  }
  if (user) {
    store.dispatch('fetchUserProfile', user)
    store.commit('setEmail', user.email)
  }
  })

路由器/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import { auth } from '../firebase'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
          path: '/login',
          name: 'login',
          component: Login,
          meta: {
            disableNavBar: true
          }
      },
      // ... other routes removed for brevity
      {
          path: '/dashboard',
          name: 'Dashboard',
          component: Dashboard,
          meta: {
            requiresAuth: true
        }
      },
    ]
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if(to["path"] !== from["path"]){
    if(requiresAuth){
      auth.onAuthStateChanged(function(user) {
        if (user) {
          console.log("Logged in", user) 
          next();
        } else {
          console.log("Here", user) //this logs user = null on refresh 
          next('/login')
        }
      });
    } else {
      next();
    }
  }
})

export default router

Answer 1

我现在觉得很愚蠢，在这里分享这个，因为它可能对面临这个问题的人有用。

原来我有一个 logout在我未使用的其中一个 components.vue 中起作用.尽管我的应用程序从未使用过它，但它是由 vue 初始化的。每次发生这种情况(即刷新时)，组件将被初始化，脚本将被执行，并出现 store.dispatch("logout")会被跑。这导致了很多无用的重定向，在用户 session 被设置为 null 的基础上。

出于对这个问题的绝望，我在我的代码库中搜索“注销”，偶然发现了剩余的代码。 “该死的东西一定是让我退出”。那只是我自己的疏忽。

已修复，设置 firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)工作正常。

对于那些花时间回答这个问题的人，谢谢和抱歉:)。如果有人偶然发现这个问题，并且有相同的根本原因，很高兴这有帮助。