React配置axios拦截器:实现发送请求时自动携带token信息的方式

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './css/global.css';
import axios from 'axios';
// 配置 Axios 拦截器
axios.interceptors.request.use(
(config) => {
// 在发送请求之前生成请求头
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
config.headers['Content-Type'] = 'application/json';
return config;
},
(error) => {
console.log(error)
return Promise.reject(error);
}
);
axios.interceptors.response.use(
(response) => {
// 对响应数据做些什么
return response;
},
(error) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode> 严格模式
<App />
// </React.StrictMode>
);
posted @   wellplayed  阅读(98)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
· 零经验选手,Compose 一天开发一款小游戏!
点击右上角即可分享
微信分享提示