Я сохранил токен в localStorage:
localStorage.setItem('token', response.data.token)
и я хочу отправлять токен в каждом запросе, я добавил это в index.js
const token = localStorage.getItem('token');
if (token) {
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
}
при запуске проекта, если токен существует, axios отправляет токен в каждом запросе, но когда я добавляю токен после запуска проекта, axiost не отправляет токен, могу ли я обновить конфигурацию по умолчанию после запуска проекта?
Вы должны запустить axios.defaults.headers.common['Authorization'] = 'Bearer ' + token; в момент добавления токена, если он не существовал при загрузке страницы, хотя перехватчик запросов, вероятно, является лучшим решением.
Я использую перехватчик запросов, и он работает, спасибо, парень.





это моя абстракция запроса Axios, это позволяет добавлять или изменять токен аутентификации в любое время:
import axios from 'axios';
import { API } from '../../constants';
import { store } from '../../../configureStore';
import { revokeAuthAction } from '../../../containers/Auth/actions';
export const getAuth = () => {
const sessionString = localStorage.getItem('session');
let auth;
if (sessionString) {
const session = JSON.parse(sessionString);
auth = `${session.nation}|${session.user}|${session.token}`;
}
return auth;
};
/**
* Create an Axios Client with defaults
*/
const client = axios.create({
baseURL: API.BASEURL,
headers: {
Authorization: getAuth(),
'Access-Control-Max-Age': 1728000,
},
});
/**
* Request Wrapper with default success/error actions
*/
const request = (options) => {
const onSuccess = (response) => options.raw ? response : response.data;
// console.debug('Request Successful!', response);
// If options.raw is true, return all response
const onError = (error) => {
// console.error('Request Failed:', error.config);
if (error.response) {
if (error.response.status === 401) {
// console.error('Unauthorized');
store.dispatch(revokeAuthAction());
} else {
// Request was made but server responded with something
// other than 2xx
// console.error('Status:', error.response.status);
// console.error('Data:', error.response.data);
// console.error('Headers:', error.response.headers);
}
} else {
// Something else happened while setting up the request
// triggered the error
// console.error('Error Message:', error.message);
}
return Promise.reject(error.response || error.message);
};
return client(options)
.then(onSuccess)
.catch(onError);
};
export default request;
Использование:
import request from '../../../../shared/lib/request';
[...]
const create = (content) => request(
{
url: API.MY_ENDPOINT,
method: 'POST',
data: content,
});
Я очень рекомендую вам прикрепить заголовок в перехватчике запросов. У меня никогда не было проблем с этим.