useContext存在数据获取延迟，导致未认证跳转登录逻辑始终误触发怎么办

跳转逻辑被误触发，本质是两个时序错位：

• 你写的useEffect用了空依赖数组[]，这个写法的特性是只在组件首次挂载完成的瞬间执行一次判断，不会响应后续Context里user值的动态更新
• 用户身份数据是异步拉取的，组件首次挂载时，user还处于Context定义的初始空值状态，此时代码就已经跑完了跳转判断，根本等不到后续异步请求返回已认证的真实用户数据
• 最终相当于把「身份数据加载中」的临时空值，误判成了「用户未登录」的最终状态，把还在加载身份的已登录用户直接踢回了登录页。

• 第一步：在UserContext中新增明确的身份加载状态标识
  别靠user是否为空反推加载状态，单独定义isAuthLoading变量：发起身份校验请求时把这个值设为true，等请求拿到结果（不管是拿到有效登录用户，还是确认无有效登录态），再把这个值设为false。调整Context对外暴露的value：

  <UserContext.Provider
    value={{
      user: user,
      isAuthLoading: isAuthLoading,
      handleLogout: handleLogout,
      userDetails: userDetails,
    }}
  >
  

• 第二步：重写路由跳转的判断逻辑，把加载状态、user值都加入useEffect的依赖数组
  等身份加载流程完全结束后，再做登录态校验：

  const { user, isAuthLoading } = useContext(UserContext);
  
  useEffect(() => {
    // 身份数据还在加载阶段，直接终止逻辑，不做任何跳转判断
    if (isAuthLoading) return;
    // 加载完成后，确认无有效用户再触发跳转
    if (!user) {
      router.push('/login')
    }
  }, [user, isAuthLoading, router])
  

• 第三步：加边界兜底，避免重复跳转
  跳转前判断当前路由是不是已经在登录页，防止重复触发路由push造成路由栈冗余：

  if (!user && router.pathname !== '/login') {
    router.push('/login')
  }
  

实操小提示：等isAuthLoading为true的时候，可以直接渲染加载占位页，不要提前渲染受保护的页面内容，还能避免页面闪一下再跳转的体验问题。

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