Nuxt3+Firebase Auth登出后API请求报错问题排查

问题核心是：登出操作完成后，当前页面的异步请求还没终止，此时Firebase用户已变为null，导致请求因权限不足失败。以下是具体解决步骤：

1. 登出时立即取消当前页面的API请求 #

如果用useFetch或useAsyncData发起请求，它们会返回cancel方法，登出前先调用这个方法终止未完成的请求：

<script setup>
const { cancel } = useFetch('/api/protected-data', {
  headers: {
    Authorization: `Bearer ${user.value?.accessToken}`
  }
})

const handleLogout = async () => {
  // 先终止当前页面的所有未完成请求
  cancel()
  // 执行Firebase登出
  await $fireAuth.signOut()
  // 重定向到登录页
  navigateTo('/login')
}
</script>

2. 在请求逻辑中增加用户存在判断 #

发起API请求前先检查用户状态，无用户时直接跳过请求，避免无效调用：

<script setup>
const user = useCurrentUser()

const fetchProtectedData = async () => {
  // 用户不存在时直接返回，不发起请求
  if (!user.value) return
  const res = await $fetch('/api/protected-data', {
    headers: {
      Authorization: `Bearer ${user.value.accessToken}`
    }
  })
}

const handleLogout = async () => {
  await $fireAuth.signOut()
  // 立即重定向，阻止页面后续渲染逻辑
  navigateTo('/login')
}
</script>

3. 添加页面权限中间件（推荐根治方案） #

创建中间件在页面加载前拦截未授权访问，从根源上避免未登录用户进入仪表盘页面：
创建middleware/auth.ts文件：

export default defineNuxtRouteMiddleware((to, from) => {
  const user = useCurrentUser()

  // 未登录且访问非登录页，直接重定向到登录页
  if (!user.value && to.path !== '/login') {
    return navigateTo('/login')
  }
  // 已登录且访问登录页，重定向到仪表盘
  if (user.value && to.path === '/login') {
    return navigateTo('/dashboard')
  }
})

在需要权限的页面（比如test.vue）中启用中间件：

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

4. 优化登出流程的执行顺序 #

确保登出操作完成后再执行重定向，用await保证异步操作的时序，避免因登出未完成就跳转导致的状态不一致：

const handleLogout = async () => {
  // 等待登出操作完全完成
  await $fireAuth.signOut()
  // 立即跳转到登录页，终止当前页面的所有后续逻辑
  navigateTo('/login')
}

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