React仅限制Post页面为私有路由，未授权跳转异常求助

1. 修正 PrivateRoute 实现，避免提前触发 token 刷新 #

你的核心问题是 PrivateRoute 逻辑和全局 token 刷新逻辑冲突了——当前 PrivateRoute 可能在路由跳转时就调用了 token 刷新接口，失败后触发 logout 跳首页。正确的做法是：路由层面只做本地 token 存在性检查，不处理 token 有效性验证，把 token 过期的校验交给 API 请求拦截器。

正确的 PrivateRoute 写法：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  // 只检查本地是否存储了 accessToken，不调用后端验证
  const isLoggedIn = !!localStorage.getItem('accessToken');

  // 未登录直接跳 Login，跳过全局刷新流程
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" replace />;
};

export default PrivateRoute;

2. 分离 Token 刷新逻辑到 API 拦截器 #

全局的 token 刷新应该只在API 请求返回 401 未授权时触发，而不是路由跳转阶段。比如用 axios 拦截器：

import axios from 'axios';

// 请求拦截器：携带 token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器：处理 token 过期
axios.interceptors.response.use(
  res => res,
  async err => {
    const originalReq = err.config;
    // 仅在首次 401 且不是刷新 token 的请求时，尝试刷新
    if (err.response.status === 401 && !originalReq._retry) {
      originalReq._retry = true;
      try {
        const refreshToken = localStorage.getItem('refreshToken');
        const { data } = await axios.post('/api/refresh/', { refresh: refreshToken });
        // 更新本地 token 和请求头
        localStorage.setItem('accessToken', data.access);
        axios.defaults.headers.common.Authorization = `Bearer ${data.access}`;
        // 重试原请求
        return axios(originalReq);
      } catch (refreshErr) {
        // 刷新失败才触发 logout，跳首页
        logoutUser();
        return Promise.reject(refreshErr);
      }
    }
    return Promise.reject(err);
  }
);

这样，未登录用户访问 /post 时，PrivateRoute 直接拦截跳 Login；已登录但 token 过期的用户，是在访问 Post 页面的 API 时才会触发刷新，失败后才跳首页，符合你的需求。

3. 检查路由配置，确保 Login 是公开路由 #

确认你的路由配置里，Login 页面没有被 PrivateRoute 包裹，Post 页面单独用 PrivateRoute 保护：

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

function App() {
  return (
    <Routes>
      {/* 公开路由直接配置 */}
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      {/* 私有路由组，仅保护 /post */}
      <Route element={<PrivateRoute />}>
        <Route path="/post" element={<Post />} />
      </Route>
    </Routes>
  );
}

4. 排查全局逻辑冲突 #

检查是否有全局监听（比如 App 组件的 useEffect、Redux 状态监听）在 token 不存在时自动调用 logoutUser，这会覆盖 PrivateRoute 的跳转逻辑。比如下面这种代码要删掉：

// 错误示例：全局强制跳转首页，要移除
useEffect(() => {
  if (!localStorage.getItem('accessToken')) {
    logoutUser();
  }
}, []);

让 PrivateRoute 负责未登录时的跳转，logoutUser 只在 token 刷新失败或用户主动登出时调用。

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