Vue项目Navbar在onMounted前渲染致Firebase认证状态显示异常

核心问题分析 #

你遇到的是典型的异步状态更新滞后于模板渲染的问题：Firebase的onAuthStateChanged和getIdTokenResult都是异步操作，而Vue的模板会在组件挂载时立即渲染，此时isLoggedIn这类状态还没被正确更新，导致Navbar显示错误的按钮组。

具体解决方案 #

1. 增加加载状态控制渲染 #

在组件中添加一个isAuthLoading的响应式状态，初始设为true，直到认证状态确定后再设为false。模板中先判断加载状态，避免渲染错误的Navbar内容：

<template>
  <nav class="navbar" v-if="!isAuthLoading">
    <!-- 已登录状态的Navbar元素 -->
    <div v-if="isLoggedIn" class="navbar-item">
      <span>欢迎回来</span>
      <button @click="handleLogout">退出登录</button>
    </div>
    <!-- 未登录状态的Navbar元素 -->
    <div v-else class="navbar-item">
      <a href="/login">登录</a>
      <a href="/register">注册</a>
    </div>
  </nav>
  <!-- 加载状态占位（可自定义样式） -->
  <div v-else class="navbar-loading">
    <span>加载中...</span>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getAuth, onAuthStateChanged, getIdTokenResult, signOut } from 'firebase/auth'

const isLoggedIn = ref(false)
const isAuthLoading = ref(true)

// 直接在setup顶层初始化认证监听，无需等待onMounted
const auth = getAuth()
onAuthStateChanged(auth, async (user) => {
  if (user) {
    // 若需验证token权限，在此调用getIdTokenResult
    const tokenResult = await getIdTokenResult(user)
    // 可根据tokenResult扩展权限逻辑，比如判断用户角色
    isLoggedIn.value = true
  } else {
    isLoggedIn.value = false
  }
  // 认证状态确定后关闭加载状态
  isAuthLoading.value = false
})

const handleLogout = async () => {
  await signOut(auth)
}
</script>

2. 抽离认证状态到全局状态管理（推荐） #

如果多个组件需要用到认证状态，建议把Firebase的认证监听抽离到Pinia/Vuex这类全局状态工具中，在应用初始化时就启动监听，避免每个组件重复处理：

// stores/auth.js（Pinia示例）
import { defineStore } from 'pinia'
import { getAuth, onAuthStateChanged, getIdTokenResult } from 'firebase/auth'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,
    isAuthLoading: true,
    user: null
  }),
  actions: {
    initAuthListener() {
      const auth = getAuth()
      onAuthStateChanged(auth, async (user) => {
        this.user = user
        this.isLoggedIn = !!user
        if (user) {
          const tokenResult = await getIdTokenResult(user)
          // 在此处理用户权限，比如保存角色信息到state
        }
        this.isAuthLoading = false
      })
    }
  }
})

在main.js中初始化全局监听：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { useAuthStore } from './stores/auth'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

// 启动认证监听
const authStore = useAuthStore()
authStore.initAuthListener()

app.mount('#app')

之后在Navbar组件中直接使用全局状态：

<template>
  <nav class="navbar" v-if="!authStore.isAuthLoading">
    <div v-if="authStore.isLoggedIn" class="navbar-item">
      <span>欢迎回来，{{ authStore.user.displayName }}</span>
      <button @click="handleLogout">退出登录</button>
    </div>
    <div v-else class="navbar-item">
      <a href="/login">登录</a>
      <a href="/register">注册</a>
    </div>
  </nav>
  <div v-else class="navbar-loading">加载中...</div>
</template>

<script setup>
import { useAuthStore } from '../stores/auth'
import { signOut, getAuth } from 'firebase/auth'

const authStore = useAuthStore()
const handleLogout = async () => {
  await signOut(getAuth())
}
</script>

为什么点击按钮后会恢复正常？ #

点击按钮会触发组件重新渲染，此时isLoggedIn已经被异步操作更新为正确值，Navbar自然会显示对应状态——本质是初始渲染时状态未就绪，后续渲染状态已同步。

内容的提问来源于stack exchange，提问作者Maciejg