React/NextJS中useEffect刷新页面双分支触发问题及优化咨询

问题修复方案 #

你的推测完全正确：页面刷新时，useSession 初始返回 undefined（会话还在加载中），触发跳转逻辑；等Supabase完成会话拉取后，session 更新为有效值，又触发留在页面的分支。

核心解决思路是区分「会话加载中」和「未登录」两种状态，修改后的代码如下：

import { useSession } from '@supabase/auth-helpers-react'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

const session = useSession()
const router = useRouter()

useEffect(() => {
  // 会话还在加载时，不执行任何逻辑
  if (session === undefined) return

  if (session) {
    console.debug('stay in page')
  } else {
    console.debug('goto login')
    router.push('/login').then(() => {
      console.debug('goto login done')
    })
  }
}, [session, router])

useSession 的返回值规则是：undefined 表示会话正在加载，null 表示未登录，Session 对象表示已登录。通过判断 session === undefined 跳过加载阶段的逻辑，就能避免两次触发分支的问题。

NextJS页面刷新时的认证处理最佳实践 #

1. 优先使用Middleware做路由守卫
   把认证逻辑放在 middleware.ts 中，在页面渲染前完成校验，从根源避免客户端初始状态波动的问题：

   // middleware.ts
   import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
   import { NextResponse } from 'next/server'
   import type { NextRequest } from 'next/server'
   
   export async function middleware(req: NextRequest) {
     const res = NextResponse.next()
     const supabase = createMiddlewareClient({ req, res })
     const { data: { session } } = await supabase.auth.getSession()
   
     // 拦截未登录用户访问需要认证的页面
     if (!session && req.nextUrl.pathname.startsWith('/dashboard')) {
       return NextResponse.redirect(new URL('/login', req.url))
     }
   
     return res
   }
   
   export const config = {
     matcher: ['/dashboard/:path*'], // 指定需要校验的路由范围
   }
   

2. 组件内处理必须加加载状态判断
   如果一定要在组件内处理认证逻辑，除了判断加载状态，还可以配合加载UI（如骨架屏）给用户反馈，避免页面闪烁。

3. 监听Supabase认证状态变化
   直接监听Auth状态变更事件，比依赖useSession更新更精准，仅在认证状态实际变化时触发逻辑：

   import { useSupabaseClient } from '@supabase/auth-helpers-react'
   import { useEffect } from 'react'
   import { useRouter } from 'next/router'
   
   const supabase = useSupabaseClient()
   const router = useRouter()
   
   useEffect(() => {
     const { data: listener } = supabase.auth.onAuthStateChange((event, session) => {
       if (event === 'SIGNED_OUT') {
         router.push('/login')
       }
       // 已登录状态可根据业务需求处理
     })
   
     return () => listener.unsubscribe()
   }, [supabase, router])
   

同类问题情况 #

大量使用Supabase + NextJS的开发者都遇到过这个问题，本质是客户端渲染时异步状态的初始波动导致的。只要明确区分「加载中」和「实际认证状态」，就能轻松解决这类问题。

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