React Router v6应用挂载时复杂获取逻辑的放置位置及相关问题

一、ProtectedRoute组件职责是否合理？ #

不合理，当前的ProtectedRoute承担了路由守卫、数据初始化、全局axios配置多个职责，违反了单一职责原则，后期维护会越来越臃肿。建议拆分职责：

1. 保留ProtectedRoute的核心职责：路由守卫 #

让它只专注于权限校验：判断用户是否认证、加载状态显示、未认证时跳转登录页。去掉数据获取和axios配置逻辑，简化后的组件更清晰：

const ProtectedRoute = () => {
  const location = useLocation();
  const { isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <Loader areaLoader />;
  }

  return isAuthenticated ? <Outlet /> : <Navigate to="/auth" state={{ from: location }} replace />;
};

2. 拆分全局axios配置 #

axios拦截器是全局配置，只需要初始化一次，不需要放在路由组件里（路由切换时可能重复执行）。可以单独抽成一个模块，在App启动时或者AuthProvider初始化时执行：

// src/utils/http.ts
import axios from 'axios';
import { getAccessTokenSilently } from '@auth0/auth0-react';

export const setupAxiosInterceptor = async () => {
  axios.interceptors.request.use(async (config) => {
    try {
      const token = await getAccessTokenSilently();
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    } catch (e) {
      console.error('Failed to attach token:', e);
      return config;
    }
  });
};

// 在AuthProvider中调用
useEffect(() => {
  setupAxiosInterceptor();
}, []);

3. 单独做初始化数据加载组件 #

新建一个AppInitializer组件，放在ProtectedRoute和BaseLayout之间，专门处理登录后的所有初始化API请求：

const AppInitializer = () => {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.user);
  const { isAuthenticated } = useAuth0();

  useEffect(() => {
    const fetchInitialData = async () => {
      // 按顺序或并行执行初始化请求
      if (!user) await dispatch(getUser());
      await dispatch(fetchRawMedias());
      // 其他需要初始化的API请求
    };

    if (isAuthenticated) {
      fetchInitialData();
    }
  }, [dispatch, isAuthenticated, user]);

  // 数据加载中显示Loader，确保页面完全初始化后再渲染布局
  if (!user) {
    return <Loader areaLoader />;
  }

  return <Outlet />;
};

调整后的路由结构：

const router = createBrowserRouter([
  {
    element: <AuthProvider />,
    children: [
      {
        element: <ProtectedRoute />,
        children: [
          {
            element: <AppInitializer />,
            children: [
              {
                element: <BaseLayout />,
                children: [
                  // 各页面路由
                ]
              }
            ]
          }
        ]
      },
      { path: PATHS.auth, element: <AuthPage /> }
    ]
  }
]);

这样拆分后，每个组件职责单一，代码可维护性大幅提升。

二、React Router Loader提前触发导致无token的问题 #

页面刷新时，Loader会在Auth0完成token获取前执行，解决思路有两种：

1. 在Loader中等待token获取完成 #

直接在Loader里调用getAccessTokenSilently()，确保拿到token后再发起请求（如果第一次调用失败，可短暂重试）：

export const projectsLoader = async () => {
  let token;
  try {
    // 尝试获取token，Auth0未完成认证时会抛出错误
    token = await getAccessTokenSilently();
  } catch (e) {
    // 等待Auth0认证流程完成，再重试一次
    await new Promise(resolve => setTimeout(resolve, 500));
    token = await getAccessTokenSilently();
  }

  // 携带token发起请求
  const response = await fetch('/api/projects', {
    headers: { Authorization: `Bearer ${token}` }
  });

  if (!response.ok) throw new Error('Failed to fetch projects');
  return response.json();
};

2. 全局axios拦截器自动处理 #

利用axios拦截器的异步能力，在请求发起前自动获取token，确保请求头携带token：

// 延续之前的axios配置
axios.interceptors.request.use(async (config) => {
  // 每次请求前都尝试获取最新token
  const token = await getAccessTokenSilently();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这种方式不需要修改每个Loader，所有请求都会自动等待token获取，更省心。

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