React Router v6 + Zustand认证：受保护路由始终重定向问题排查

以下是几个常见的排查方向和解决办法：

1. 处理异步验证的加载状态 #

你的RequiredAuth组件大概率在接口请求未完成、user状态还处于初始值时就执行了重定向逻辑。比如Zustand中user初始值设为null，组件挂载时直接判断!user就跳转，等接口返回更新user时，组件已经完成重定向流程了。

解决办法：在Zustand状态中新增isLoading字段标记验证请求状态，在RequiredAuth中先判断加载状态，加载中时显示过渡组件，等请求完成后再执行权限判断。

示例代码： #

Zustand Store：

import { create } from 'zustand';

const useAuthStore = create((set) => ({
  user: null,
  isLoading: true, // 初始设为true，因为页面加载时会立即发起验证请求
  setUser: (user) => set({ user }),
  setIsLoading: (status) => set({ isLoading: status }),
}));

// 页面初始化时调用验证接口
export const fetchCurrentUser = async () => {
  useAuthStore.getState().setIsLoading(true);
  try {
    const res = await fetch('/auth/currentuser', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    });
    const user = await res.json();
    useAuthStore.getState().setUser(user);
  } catch (err) {
    console.error('验证失败:', err);
  } finally {
    useAuthStore.getState().setIsLoading(false);
  }
};

RequiredAuth组件：

import { Navigate, Outlet } from 'react-router-dom';
import { useAuthStore } from './store';

const RequiredAuth = () => {
  const { user, isLoading } = useAuthStore();

  // 加载中时显示过渡状态，避免提前重定向
  if (isLoading) {
    return <div>验证中...</div>;
  }

  return user ? <Outlet /> : <Navigate to="/" replace />;
};

2. 确认组件正确订阅Zustand状态 #

确保RequiredAuth组件能接收到Zustand的user状态更新。如果组件没有正确订阅，就算store里的user已更新，组件也不会重新渲染，依然使用旧的初始值判断。

排查方法：在RequiredAuth组件内打印user和isLoading，观察状态更新时是否会输出新值。如果没有输出，检查是否正确使用了useAuthStore钩子——必须在组件内部解构状态，才能自动订阅变化。

错误示例： #

// 错误：在组件外部获取状态，无法触发组件重渲染
const user = useAuthStore.getState().user;

const RequiredAuth = () => {
  // 这里的user永远是初始值
  return user ? <Outlet /> : <Navigate to="/" />;
};

正确示例： #

const RequiredAuth = () => {
  // 在组件内部用钩子解构，自动订阅状态变化
  const { user } = useAuthStore();
  return user ? <Outlet /> : <Navigate to="/" />;
};

3. 检查路由配置是否正确 #

确保RequiredAuth作为路由父组件，正确嵌套受保护路由。错误的嵌套方式会导致Outlet失效，进而触发重定向。

正确的路由配置： #

import { Routes, Route } from 'react-router-dom';
import RequiredAuth from './RequiredAuth';
import Home from './Home';
import Login from './Login';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Login />} />
      {/* 所有受保护路由嵌套在RequiredAuth下 */}
      <Route element={<RequiredAuth />}>
        <Route path="/home" element={<Home />} />
        {/* 其他需要权限的路由也放在这里 */}
      </Route>
    </Routes>
  );
}

4. 确认JWT令牌与接口返回有效性 #

虽然你提到Zustand的user状态已更新，仍需确认：

• 调用/auth/currentuser时，请求头确实携带了有效的JWT令牌；
• 接口返回的user数据不是null或空对象；
• 调用setUser时确实传入了正确的user数据，而非undefined。

可以通过浏览器Network面板查看请求响应，或在Zustand的setUser处打印参数，确认数据正确性。

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