Nuxt中间件刷新页面时抛出Nuxt Instance Unavailable错误求助

问题根源 #

1. 错误的用户判断逻辑：useSupabaseUser()返回的是响应式Ref对象，直接用!user判断永远为false（因为Ref对象本身存在），应该检查user.value是否为空。
2. 导航处理不规范：路由中间件需要返回navigateTo的结果，让Nuxt正确处理导航流程，之前的代码没有返回值，在SSR场景下会导致实例上下文异常。
3. SSR初始化时序问题：刷新页面触发SSR时，Supabase用户状态可能还未完成hydration，错误的判断逻辑会触发不必要的导航，进而引发实例不可用错误。

修正后的中间件代码 #

export default defineNuxtRouteMiddleware((to, from) => {
  // 避免跳转到登录页后重复触发中间件循环
  if (to.path === '/login') {
    return
  }

  const user = useSupabaseUser()
  // 正确判断用户是否登录：检查Ref的value属性
  if (!user.value) {
    return navigateTo('/login')
  }
})

额外优化建议 #

• 确保Supabase的SSR配置正确，在nuxt.config.ts中启用SSR支持：

  export default defineNuxtConfig({
    modules: ['@nuxtjs/supabase'],
    supabase: {
      redirect: false, // 禁用内置跳转，用自定义中间件控制
    }
  })
  

• 如果需要处理SSR场景下的用户验证，可以结合useRequestHeaders()获取请求头中的Cookie，确保服务器端能正确识别已登录用户：

  export default defineNuxtRouteMiddleware(async () => {
    const user = useSupabaseUser()
    const headers = useRequestHeaders(['cookie'])
    
    // 在服务器端同步用户状态
    if (process.server && !user.value) {
      await useSupabaseClient().auth.getUser({ headers })
    }
  
    if (!user.value && to.path !== '/login') {
      return navigateTo('/login')
    }
  })
  

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