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 @ 2024-06-20 13:57  wellplayed  阅读(34)  评论(0编辑  收藏  举报