Nuxt中间件校验登录态时手动刷新导致Vuex store属性为null如何修复

刷新/直接输入地址访问时登录态判定错误的核心原因：

• 服务端渲染阶段无法获取Firebase客户端存储的登录态，初始Store中userProfile为null，所以isLoggedIn返回false
• 客户端路由跳转时Firebase已完成登录态同步，判定逻辑正常

方案1：指定中间件仅客户端执行 #

Nuxt支持中间件加.client后缀，跳过SSR阶段执行，完全在浏览器端运行判定逻辑：

1. 将middleware/redirect.js重命名为middleware/redirect.client.js
2. 页面中间件配置保持不变即可
3. 补充Store初始化状态标记，等待Firebase登录态同步完成再判定：

• 修改store/state.js新增初始化标记：

export default () => ({
    authUser: null,
    userProfile: null,
    authInitialized: false
  })

• 新增store/mutations.js修改初始化状态的方法：

export default {
  setAuthInitialized(state, value) {
    state.authInitialized = value
  }
}

• 修改plugins/auth.js，在认证状态监听回调最后标记初始化完成：

import { onAuthStateChanged, getAuth } from 'firebase/auth'
import { doc, getDoc } from 'firebase/firestore'
import { db } from '~/plugins/firebase'

export default ({ store }, inject) => {
  const auth = getAuth()
  inject(
    'authObserver',
    onAuthStateChanged(auth, async (user) => {
      console.log('user state:', user)
      if (user) {
        // 原有获取用户信息写入Store的逻辑保留
      }
      // 无论是否有登录态，都标记认证状态初始化完成
      store.commit('setAuthInitialized', true)
    })
  )
}

• 修改中间件逻辑，等待初始化完成后再做登录判定：

export default async function ({ redirect, store, route }) {
  // 等待认证状态初始化完成
  while (!store.state.authInitialized) {
    await new Promise(resolve => setTimeout(resolve, 100))
  }
  const isLoggedIn = store.getters.isLoggedIn
  if (!isLoggedIn) {
    // 携带当前路径参数，登录完成后可直接回跳
    redirect({ name: 'login', query: { redirect: route.fullPath } })
  }
}

方案2：关闭上传页面SSR（更简单） #

如果整个上传页面不需要被搜索引擎爬取，直接在页面配置中关闭SSR即可，原有中间件逻辑不需要调整：

export default {
  name: 'Upload',
  middleware: 'redirect',
  ssr: false,
  // 其他页面逻辑保留
}

登录页登录成功后，读取路由参数跳回原访问页即可：

// 登录成功后执行
const redirectPath = this.$route.query.redirect || '/'
this.$router.push(redirectPath)

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