当前位置：首页 > React

react axios如何发送token

2026-03-11 04:14:23React

发送 Token 的方式

在 React 中使用 Axios 发送 Token 通常需要将 Token 添加到请求头中。以下是常见的几种方法：

设置全局请求头

在 Axios 的全局配置中设置 Authorization 头，适用于所有请求：

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

为单个请求添加 Token

react axios如何发送token

在特定请求的配置中添加 headers 字段：

axios.get('/api/data', {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

使用请求拦截器

react axios如何发送token

通过 Axios 的拦截器自动为每个请求添加 Token：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Token 的存储与获取

通常 Token 会存储在 localStorage 或 sessionStorage 中，使用时从中获取：

const token = localStorage.getItem('token');

示例代码

以下是一个完整的示例，展示如何在 React 组件中发送带 Token 的请求：

import axios from 'axios';
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const token = localStorage.getItem('token');

    axios.get('/api/protected', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
  }, []);

  return <div>Protected Data</div>;
}