Створення безпечних HTTP-запитів в Redux за допомогою Axios

9 Березня 2024 в 01:18 62

У сучасній веб-розробці велика увага приділяється безпеці та ефективності взаємодії між клієнтом і сервером. Redux як становий контейнер, разом з Axios як обраним HTTP-клієнтом, створює міцну основу для розв’язання цих завдань. Проте, інтеграція системи аутентифікації, що динамічно оновлює токени доступу для кожного запиту, може стати складним завданням. У цій статті розглянемо детальний підхід до налаштування приватного екземпляра Axios у Redux для забезпечення безпечних аутентифікованих запитів без використання локального сховища або залежності від хуків React, які не можна використовувати в Redux slice.

Загальний огляд проблеми

Основною вимогою є створення системи, яка б дозволяла автоматично додавати токен доступу до HTTP-запитів, виконаних через Axios з Redux. Токен повинен зберігатися у стані додатку і оновлюватися за необхідності без втручання користувача. Традиційно, для доступу до стану в Redux використовуються селектори у компонентах React, але при роботі з асинхронними операціями в Redux (такими як thunks) безпосередньо в slice, доступ до хуків React неможливий.

Стратегії вирішення

Щоб вирішити цю проблему, можна використати кілька стратегій:

Використання middleware для динамічного оновлення заголовків

Redux middleware пропонує потужний механізм для втручання у процес диспетчеризації дій, що дає змогу модифікувати запити перед їхнім виконанням. Створення спеціалізованого middleware, яке додаватиме токен доступу до кожного запиту, відправленого через Axios, є одним із ефективних рішень. Ось приклад такого middleware:

const axiosMiddleware = store => next => action => {
  if (action.type === 'API_CALL') {
    const state = store.getState();
    const token = state.auth.token;
    if (token) {
      action.payload.headers = {
        ...action.payload.headers,
        Authorization: `Bearer ${token}`,
      };
    }
  }
  return next(action);
};

const axiosMiddleware = store => next => action => {

if (action.type === 'API_CALL') {

const state = store.getState();

const token = state.auth.token;

if (token) {

action.payload.headers = {

...action.payload.headers,

Authorization: `Bearer ${token}`,

};

}

return next(action);

};

Цей підхід вимагає, щоб дії, пов’язані з API-запитами, містили інформацію про необхідні заголовки та інші параметри запиту.

Динамічне оновлення екземпляра Axios

Іншим рішенням є налаштування екземпляра Axios таким чином, щоб він автоматично використовував актуальний токен доступу. Це можна реалізувати за допомогою перехоплювачів (interceptors) Axios. Перехоплювачі дозволяють модифікувати запити та відповіді глобально перед їх обробкою або перед тим, як вони будуть повернуті до коду, що викликав запит.

import axios from 'axios';
import store from './store'; // Імпортуйте ваш Redux store
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});
axiosInstance.interceptors.request.use(config => {
  const state = store.getState();
  const token = state.auth.token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
export default axiosInstance;

import axios from 'axios';

import store from './store'; // Імпортуйте ваш Redux store

const axiosInstance = axios.create({

baseURL: 'https://api.example.com',

});

axiosInstance.interceptors.request.use(config => {

const state = store.getState();

const token = state.auth.token;

if (token) {

config.headers.Authorization = `Bearer ${token}`;

}

return config;

});

export default axiosInstance;

Такий підхід гарантує, що всі запити, виконані через цей екземпляр Axios, будуть містити актуальний токен доступу. Втім, важливо зазначити, що використання глобального стану Redux безпосередньо у модулях, які не є частиною логіки Redux, може ускладнити тестування та зробити ваш код менш модульним.

Обробка оновлення токена

Ще одним важливим аспектом є обробка ситуацій, коли токен доступу застаріває або стає недійсним. В таких випадках слід автоматично ініціювати процес оновлення токена і повторити оригінальний запит з новим токеном. Це можна реалізувати, додавши до екземпляра Axios другий перехоплювач, який буде відповідати за обробку помилок відповідей.

axiosInstance.interceptors.response.use(
  response => response,
  async error => {
    if (error.response && error.response.status === 401 && !error.config._retry) {
      error.config._retry = true;
      try {
        const refreshToken = store.getState().auth.refreshToken;
        const { data: newToken } = await axios.post('/refresh-token', { refreshToken });
        store.dispatch(updateToken(newToken)); // Дія оновлення токена в стані
        error.config.headers['Authorization'] = `Bearer ${newToken.accessToken}`;
        return axiosInstance(error.config); // Повторний запит із оновленим токеном
      } catch (refreshError) {
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.response.use(

response => response,

async error => {

if (error.response && error.response.status === 401 && !error.config._retry) {

error.config._retry = true;

try {

const refreshToken = store.getState().auth.refreshToken;

const { data: newToken } = await axios.post('/refresh-token', { refreshToken });

store.dispatch(updateToken(newToken)); // Дія оновлення токена в стані

error.config.headers['Authorization'] = `Bearer ${newToken.accessToken}`;

return axiosInstance(error.config); // Повторний запит із оновленим токеном

} catch (refreshError) {

return Promise.reject(refreshError);

}

return Promise.reject(error);

}

);

Такий підхід дозволяє автоматично відновлювати сеанс користувача без його втручання, що покращує загальний досвід використання додатку.

Висновок

Інтеграція приватного екземпляра Axios у Redux для обробки аутентифікованих запитів вимагає уважного підходу та розуміння як внутрішньої архітектури Redux, так і можливостей Axios. Використання Redux middleware, налаштування екземпляра Axios з перехоплювачами запитів і відповідей, а також ефективна обробка оновлення токенів, є ключовими елементами для створення безпечних і ефективних HTTP-запитів в вашому додатку. Правильно сконфігурована система не тільки спростить процес розробки за допомогою централізованого управління даними авторизації, але й забезпечить високий рівень безпеки та надійності взаємодії з сервером.