如何在react-router loader中遇401时重定向至登录路由？

核心思路 #

利用React Router提供的redirect函数，在loader中捕获API返回的401未授权状态，直接返回跳转指令到登录页，同时保存当前访问的路径，方便登录成功后自动跳回原页面。

具体实现步骤 #

1. 改造用户Profile路由的loader

在loader里处理fetch响应，针对性判断状态码：

• 若返回401，生成带原路径参数的登录页跳转地址
• 请求成功则返回接口数据，其他错误可抛出交由errorElement统一处理

import { redirect } from "react-router-dom";

// 路由配置片段
{
  element: <UserProfile />,
  loader: async ({ request }) => {
    const response = await fetch("/api/userprofile");
    
    // 捕获401状态，跳转登录页并携带原访问路径
    if (response.status === 401) {
      const redirectUrl = `/login?from=${encodeURIComponent(request.url)}`;
      return redirect(redirectUrl);
    }

    // 处理其他请求失败场景
    if (!response.ok) {
      throw new Error("加载用户信息失败");
    }

    return response.json();
  },
  // 可选：配置错误页面处理非401的请求错误
  errorElement: <ProfileErrorPage />
}

2. 登录页处理跳转回原页面逻辑

登录成功后，从URL查询参数中取出之前保存的路径，跳转到该页面；如果没有则默认跳首页。同时可以在登录页的loader里提前检查登录状态，避免已登录用户重复进入登录页。

import { useSearchParams, useNavigate } from "react-router-dom";

function Login() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  // 获取原路径，默认值为首页
  const from = searchParams.get("from") || "/";

  const handleLogin = async (formData) => {
    const response = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify(formData),
      headers: { "Content-Type": "application/json" }
    });

    if (response.ok) {
      // 登录成功后跳回原页面
      navigate(from, { replace: true });
    } else {
      // 处理登录失败逻辑，比如提示错误信息
      alert("用户名或密码错误");
    }
  };

  return (
    <div className="login-container">
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button onClick={() => handleLogin({/* 传入表单数据 */})}>登录</button>
    </div>
  );
}

// 登录页的loader：提前检查登录状态，已登录则直接跳回原页面
export async function loginLoader({ request }) {
  // 自定义函数：检查当前用户是否已登录（比如从localStorage或cookie判断）
  const isLoggedIn = await checkUserAuthStatus();
  
  if (isLoggedIn) {
    const searchParams = new URL(request.url).searchParams;
    const from = searchParams.get("from") || "/";
    return redirect(from);
  }

  return null;
}

// 登录页路由配置
{
  path: "/login",
  element: <Login />,
  loader: loginLoader
}

额外说明 #

• 使用redirect是React Router官方推荐的loader内跳转方式，能保证路由流程的一致性
• 携带原路径参数是提升用户体验的关键，避免用户登录后需要重新寻找之前的页面
• 非401的错误可以通过errorElement统一展示错误页面，避免页面崩溃

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