如何基于Zustand的isAuth变量正确实现React路由保护？

核心问题是异步认证请求完成前，isAuth初始值为false，导致路由直接跳转。我们可以利用Zustand中已有的isLoading状态，在认证请求未完成时等待，避免过早跳转。

解决方案步骤 #

• 在DashLayout中同时获取isAuth和isLoading状态
• 当isLoading为true时，渲染加载状态UI（比如加载提示、加载动画）
• 加载完成后，根据isAuth的值决定渲染路由内容还是跳转到登录页

修改后的DashLayout代码 #

const DashLayout = () => {
  const { isAuth, isLoading } = useAuthStore((state) => ({
    isAuth: state.isAuth,
    isLoading: state.isLoading
  }));

  // 认证请求进行中时，显示加载状态
  if (isLoading) {
    return <div>加载中...</div>; // 可替换为项目中的自定义加载组件
  }

  return isAuth ? <Outlet /> : <Navigate to="/login" />;
};

原理说明 #

• checkAuth函数执行时会先将isLoading设为true，请求结束（成功/失败）后再设为false
• 通过判断isLoading，确保只有在认证结果确定后，才执行路由跳转或内容渲染逻辑
• 如果认证失败，isAuth保持false，会正常跳转到登录页；如果成功，则渲染受保护的子路由

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