reactjs - 如何正确设置axios默认标题

Question

我在我的项目中使用reactjs，但是在config.js文件中我设置了全局axios配置时遇到一个问题，我正在为axios请求设置默认 header ，但是当我发出axios请求时，它不会在请求中发送这些 header 。

config.js

import axios from 'axios';

const instance = axios.create({
    baseURL: 'URL/api'
});

export const setAuthToken = (token) => {
    if (token) {
        // Apply to every request
        instance.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    } else {
        // Delete auth header
        delete instance.defaults.headers.common['Authorization'];
    }
};

export default instance;

Login.js

import axios from '../../../config';
import { setAuthToken } from '../../../config';
axios
            .post('/auth/signin', {
                username: email,
                password: password
            })
            .then((res) => {
                setCurrentUser(res.data);
                setAuthToken(res.data.accessToken);
                setLoading(false);
            })
            .catch((err) => {
                console.log(err);
                setLoading(false);
                setError(true);
            });

Answer 1

您可以将axios interceptors用于此任务。

1-)在成功登录内部，将检索到的 token 放入localStorage。删除setAuthToken行。

 .then((res) => {
                setCurrentUser(res.data);
                localStorage.setItem("token", res.data.accessToken);
                setLoading(false);
            })

2-)将此拦截器添加到您的axios实例中。

const instance = axios.create({
    baseURL: 'URL/api'
});

instance.interceptors.request.use(
  function(config) {
    const token = localStorage.getItem("token"); 
    if (token) {
      config.headers["Authorization"] = 'Bearer ' + token;
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);