如何存储Firebase Authentication会话 解决页面刷新需重新登录问题

Firebase Authentication 初始化时是异步加载本地存储的用户会话信息的，如果你在应用启动时直接同步读取currentUser判断登录状态，此时 Auth 还未完成本地会话加载，拿到的结果为 null，就会触发重定向到登录页的逻辑，表面现象就是刷新页面后需要重新登录。

1. 用onAuthStateChanged监听登录状态，禁止直接同步读取currentUser #

所有登录状态判断逻辑都要依赖该监听器的回调结果，以 Pinia 状态管理为例，示例代码如下：

// stores/auth.js
import { defineStore } from 'pinia'
import { getAuth, onAuthStateChanged } from "firebase/auth"

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    authInitialized: false
  }),
  actions: {
    initAuth() {
      const auth = getAuth()
      onAuthStateChanged(auth, (user) => {
        this.user = user
        this.authInitialized = true
      })
    }
  }
})

在入口文件main.js中优先初始化该监听：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { useAuthStore } from './stores/auth'

const app = createApp(App)
const authStore = useAuthStore()
// 先初始化Auth监听再挂载应用
authStore.initAuth()
app.mount('#app')

2. 调整路由拦截逻辑 #

如果用 Vue Router 做登录拦截，需要等 Auth 初始化完成后再做登录状态判断，示例如下：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */]
})

router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore()
  // 等待Auth初始化完成
  if (!authStore.authInitialized) {
    await new Promise(resolve => {
      const timer = setInterval(() => {
        if (authStore.authInitialized) {
          clearInterval(timer)
          resolve()
        }
      }, 100)
    })
  }
  const isLogin = !!authStore.user
  if (to.meta.requiresAuth && !isLogin) {
    next('/login')
  } else {
    next()
  }
})

3. 检查Auth持久化配置 #

Firebase Auth 默认使用localStorage持久化会话，如果你手动修改了持久化规则为SESSION（仅存在sessionStorage）或者NONE（仅内存存储），就会出现刷新丢失会话的问题，检查登录逻辑中是否有错误配置：

// 错误配置示例，会导致会话仅在当前标签页生效，不要使用
import { getAuth, setPersistence, browserSessionPersistence } from "firebase/auth"
const auth = getAuth()
setPersistence(auth, browserSessionPersistence)

4. 检查本地存储权限 #

如果用户浏览器开启了隐私模式、禁用了本地存储或第三方Cookie，也会导致Firebase无法保存会话，这种情况可增加用户提示，告知需要开启本地存储权限才能正常使用。

内容的提问来源于stack exchange，提问作者Lucas Gardini Dias