react axios如何发送token
使用 Axios 发送 Token 的方法
在 React 中使用 Axios 发送 Token 通常需要将 Token 添加到请求头中。以下是几种常见的方法:
设置全局 Axios 默认请求头
可以在应用的入口文件或初始化阶段设置 Axios 的默认请求头,确保所有请求自动携带 Token:
import axios from 'axios';
axios.defaults.headers.common['Authorization'] = `Bearer ${yourToken}`;
在单个请求中添加 Token
对于特定请求,可以在请求配置中单独添加 Token:
axios.get('/api/data', {
headers: {
'Authorization': `Bearer ${yourToken}`
}
});
使用 Axios 拦截器
通过拦截器可以在请求发送前统一添加 Token,适用于需要动态更新 Token 的场景:
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token'); // 从存储中获取 Token
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
封装自定义 Axios 实例
可以创建一个自定义的 Axios 实例,预配置 Token 和其他默认设置:
const api = axios.create({
baseURL: '/api',
headers: {
'Authorization': `Bearer ${yourToken}`
}
});
// 使用实例发送请求
api.get('/data');
注意事项
- Token 通常存储在
localStorage或sessionStorage中,需确保其安全性。 - 对于敏感操作,建议结合 HTTPS 和 Token 过期机制。
- 拦截器适合处理全局逻辑,但需避免重复添加 Token。







