Блог

Главная - Вопросы по программированию - Как убедиться, что запрос axios использует последний токен из хранилища redux?

Как убедиться, что запрос axios использует последний токен из хранилища redux?

#javascript #reactjs #react-native #redux #axios

#javascript #reactjs #react-native #redux #axios

Вопрос:

У меня есть accessToken в моем хранилище redux. Я создаю клиент axios следующим образом:

 import axios from 'axios';
import store from '../redux/store';

const apiClient = axios.create({
    baseURL: 'http://localhost:5002/api/',
    headers: {
        Authorization:`Bearer ${store.getState().auth.accessToken}` // ???
    }
});
apiClient.defaults.headers.common['Authorization'] = `Bearer ${store.getState().auth.accessToken}`; // ???

export default apiClient;

Я хочу, чтобы каждый запрос, отправляемый ApiClient, содержал текущее значение accessToken из хранилища redux (на момент отправки запроса). И со строками, которые отмечены ???, я не уверен, устанавливается ли заголовок авторизации только один раз при создании ApiClient, или значение заголовка также изменяется при обновлении accessToken в хранилище.
Позже я хочу сделать запрос, подобный этому:

 apiClient.get<User[]>('Users/Friends');

И я хочу, чтобы запрос включал accessToken, который находится в хранилище во время отправки запроса, а не во время создания клиента. Есть ли способ добиться этого при создании клиента или мне всегда нужно указывать конфигурацию заголовка авторизации с текущим accessToken в каждом запросе?

Теперь я добавил этот код:

 const apiClient = axios.create({
    baseURL: 'http://192.168.178.188:5002/api/'
});

apiClient.interceptors.request.use(config => {
    config.headers['Authorization'] = `Bearer ${store.getState().auth.accessToken}`
    return config;
});

Это самое элегантное решение?