React+Rails项目如何自动携带Authorization Token，避免手动重复添加

针对你的场景，有几种实用的自动化方案，不用每次手动添加请求头：

1. 封装自定义Fetch工具函数 #

这是最直接的方案，把token的逻辑封装到全局复用的fetch函数里，所有请求都通过这个函数发起：

// src/utils/fetchWithAuth.js
const fetchWithAuth = async (url, options = {}) => {
  // 从localStorage读取登录后存储的token（登录成功时记得把token存在这里）
  const token = localStorage.getItem('auth_token');
  
  // 构建请求头：默认加入Content-Type，再合并传入的自定义头
  const headers = {
    'Content-Type': 'application/json',
    ...options.headers,
  };
  
  // 存在token时自动添加Authorization头
  if (token) {
    headers['Authorization'] = `Bearer ${token}`;
  }
  
  // 发起请求并返回结果
  return fetch(url, {
    ...options,
    headers,
  });
};

export default fetchWithAuth;

使用方式 #

把原来的fetch('/api/xxx')替换成fetchWithAuth('/api/xxx')即可，示例：

// 获取文章列表
const getPosts = async () => {
  const res = await fetchWithAuth('/api/posts');
  const posts = await res.json();
  // 处理数据逻辑
};

2. 结合React Context全局管理认证状态 #

如果项目需要全局维护登录状态（比如token可能在组件状态中动态更新），可以用Context配合自定义Hook来封装：

第一步：创建Auth Context #

// src/contexts/AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  // 初始化token：优先从localStorage读取
  const [token, setToken] = useState(localStorage.getItem('auth_token'));
  
  // token变化时同步到localStorage
  useEffect(() => {
    token ? localStorage.setItem('auth_token', token) : localStorage.removeItem('auth_token');
  }, [token]);
  
  // 登录时设置token的方法
  const login = (newToken) => setToken(newToken);
  // 登出时清除token
  const logout = () => setToken(null);
  
  return (
    <AuthContext.Provider value={{ token, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// 自定义Hook方便组件调用
export const useAuth = () => useContext(AuthContext);

第二步：封装带Context的Fetch Hook #

// src/utils/useFetchWithAuth.js
import { useAuth } from '../contexts/AuthContext';

export const useFetchWithAuth = () => {
  const { token } = useAuth();
  
  return async (url, options = {}) => {
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers,
    };
    
    if (token) {
      headers['Authorization'] = `Bearer ${token}`;
    }
    
    return fetch(url, { ...options, headers });
  };
};

使用方式 #

在组件中调用这个Hook发起请求：

import { useFetchWithAuth } from '../utils/useFetchWithAuth';

const PostList = () => {
  const fetchWithAuth = useFetchWithAuth();
  
  useEffect(() => {
    const getPosts = async () => {
      const res = await fetchWithAuth('/api/posts');
      const data = await res.json();
      // 处理数据逻辑
    };
    getPosts();
  }, [fetchWithAuth]);
  
  return (
    // 组件渲染内容
  );
};

后端配合（Rails） #

确保Rails后端能正确解析Bearer Token，可以写一个简单的中间件：

# app/middlewares/auth_middleware.rb
class AuthMiddleware
  def initialize(app)
    @app = app
  end

  def call(env)
    auth_header = env['HTTP_AUTHORIZATION']
    if auth_header&.start_with?('Bearer ')
      token = auth_header.split(' ').last
      # 根据token查找用户（需和你存储token的逻辑对应）
      current_user = User.find_by(auth_token: token)
      env['current_user'] = current_user if current_user
    end
    @app.call(env)
  end
end

然后在config/application.rb中注册中间件：

config.middleware.use AuthMiddleware

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