在您的代码中，只要会话或路由器的值发生更改（useEffect 的第二个参数），就会执行 useEffect。因此，if 和 else 都不会在 useEffect 的同一次运行中执行，尽管是在可能快速连续执行的两次不同运行中执行。

这是实现您所追求的目标的一种方法。

1. 使用 useState 创建和管理变量的状态
2. 在 useEffect 中，通过应用逻辑检查会话来设置（或不设置）状态
3. 在返回中呈现当前页面或显示登录页面。

示例实现：

const App = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  useEffect(()=>{
    //apply the logic and set the state
    if(logic) setIsLoggedIn(true);
  },[]) 
  
  return  {isLoggedIn ? <ActiveApp /> : <Login />}

}

终于，我找到了根本原因。

它来自 supabase auth helper，它是一个异步函数，它不包含是否正在加载或错误的状态，这意味着它在开始（这意味着它正在加载）。

解决这个问题的简单方法是直接使用useSessionContext。 session 仍将以异步方式获取，但可以通过同步方式获取 isLoading 和 error 状态来解决此问题，并且它们可用于 useEffect 内的条件分支。

新代码将如下所示：

  import { useSessionContext } from '@supabase/auth-helpers-react'
  const {isLoading, session} = useSessionContext()
  useEffect(() => {

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