当前位置：首页 > React

react如何在头部传token

2026-01-25 08:31:32React

在 React 中传递 Token 到请求头部

在 React 应用中，通常需要将 Token（如 JWT）附加到 HTTP 请求的头部（通常是 Authorization 头）。以下是几种常见方法：

使用 Axios 全局配置

通过 Axios 的拦截器或全局配置，可以在每次请求时自动添加 Token：

import axios from 'axios';

// 设置全局默认头部
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;

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

使用 Fetch API

如果使用原生 fetch，可以手动设置头部：

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
});

封装自定义 HTTP 客户端

创建一个封装类或函数，统一处理 Token 逻辑：

class ApiClient {
  static async request(url, options = {}) {
    const token = localStorage.getItem('token');
    const headers = {
      ...options.headers,
      Authorization: token ? `Bearer ${token}` : undefined
    };
    return fetch(url, { ...options, headers });
  }
}

// 使用示例
ApiClient.request('https://api.example.com/data');

使用 Context 或状态管理

通过 React Context 或 Redux 等状态管理工具传递 Token：

// 在 Context 中提供 Token
const AuthContext = React.createContext();

function App() {
  const [token, setToken] = useState(localStorage.getItem('token'));
  return (
    <AuthContext.Provider value={{ token }}>
      <ChildComponent />
    </AuthContext.Provider>
  );
}

// 在子组件中使用
function ChildComponent() {
  const { token } = useContext(AuthContext);
  // 将 token 用于请求
}

动态更新 Token

如果 Token 可能过期或更新，需要动态处理：

// 示例：响应拦截器中处理 401 错误
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 刷新 Token 逻辑
    }
    return Promise.reject(error);
  }
);

注意事项

安全存储：避免将 Token 直接存储在 JavaScript 变量中，优先使用 HttpOnly Cookie 或安全存储（如 localStorage）。
HTTPS：确保所有请求通过 HTTPS 传输，防止 Token 被截获。
Token 过期：实现 Token 刷新机制，避免频繁重新登录。

以上方法可根据项目需求和技术栈选择组合使用。

react如何在头部传token