React如何处理重定向？React对接Rails API的302跳转处理

这个问题我之前也踩过坑——Rails的认证系统（比如Devise）默认会给未认证请求返回302重定向到它自带的登录页，但咱们的React是单页应用，肯定要跳转到自己的/login路由对吧？下面分两种场景给你解决方案：

方案一：修改Rails API的响应（推荐） #

API服务本质上应该返回状态码而非重定向，302更适合传统服务端渲染的场景。咱们可以调整Rails的认证逻辑，让未认证请求返回401 Unauthorized，这样前端能更清晰地处理：

1. 针对Devise用户 #

如果用的是Devise，在config/initializers/devise.rb里找到这段配置，修改成返回401：

config.http_authenticatable_on_xhr = true
config.navigational_formats = [] # 清空导航格式，让API请求返回401而非302

2. 自定义认证过滤器 #

如果是自己写的认证逻辑，在控制器的before_action里修改响应：

def authenticate_user!
  unless current_user
    render json: { error: "Unauthorized" }, status: :unauthorized
    return
  end
end

这样前端收到401后，就可以直接跳转到/login页面了。

方案二：前端拦截302响应（无法修改Rails时用） #

如果因为某些原因不能改Rails的配置，那咱们得在前端请求层面拦截302响应。这里以常用的axios和原生fetch为例：

用Axios的拦截器 #

在你的axios实例里添加响应拦截器：

import axios from 'axios';
import { useNavigate } from 'react-router-dom'; // 适配React Router v6

// 创建axios实例
const api = axios.create({
  baseURL: 'http://your-rails-api-url.com',
  withCredentials: true, // 带上会话cookie
});

// 响应拦截器
api.interceptors.response.use(
  response => response,
  error => {
    // 检查是否是302状态码
    if (error.response?.status === 302) {
      // 阻止浏览器自动跟随重定向
      error.config.validateStatus = () => true;
      // 跳转到React的登录页
      const navigate = useNavigate();
      navigate('/login');
    }
    return Promise.reject(error);
  }
);

export default api;

用原生Fetch #

在封装的fetch函数里处理：

import { useNavigate } from 'react-router-dom';

async function fetchWithAuth(url, options = {}) {
  const response = await fetch(url, {
    ...options,
    credentials: 'include', // 带上会话cookie
  });

  if (response.status === 302) {
    // 用React Router跳转（推荐）
    const navigate = useNavigate();
    navigate('/login');
    // 若不用路由，也可以用window.location.href = '/login'，但会刷新页面
    return;
  }

  return response;
}

注意事项 #

• 跨域场景下，要确保Rails已经配置了CORS，允许前端域名的请求，并且允许携带credentials。
• 用React Router跳转时，尽量用navigate方法而非window.location.href，保持单页应用的无刷新体验。

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