React + axios + redux перехватчики

Предлагаю сослаться на редукционный преобразователь.

Вы должны создать api-wrapper-helper для внедрения в redux-thunk как дополнительный аргумент, а затем получить доступ к api-wrapper-helper из действий redux.

api-wrapper-helper - это функция, которая получает URL-адрес и метод в качестве аргумента и отправляет запрос на api-сервер, а затем возвращает результат. (вы можете установить заголовки в этом файле)

Например, вы можете увидеть ApiClient.js из React-Redux-универсальный-горячий-пример шаблон.

Предлагаю установить шапку axios.defaults.headers.common.authorization. Посмотрите здесь Глобальные значения по умолчанию для аксиомов. Если вам нужен рабочий пример, вам может помочь публичное репо это.

создайте redux-middleware, чтобы делать эти вещи.

Помимо действия как interceptor на add header token, вы также делаете request/response transformation.

Кроме того, вы можете указать next action, на который вы хотите передать dispatch результат, если вы не хотите возвращать обещание и результат.

Middleware дает вам шанс to get the store state, а также fetch & dispatch other action

const apiInterceptor = store => next => action => {

      if (action.type !== 'ajax') return next(action)

      const state = store.getState();

      state.token // get token here

      //add this api check part in some other module.
      if (action.api=='UPDATE_CLIENT') 
        {
          method = 'post';
          url  = 'some url';
        }
      else
      {
        method = 'get';
        url  = 'other url';
      }


      fetch(url, {
        method: method,
        headers : 'add token here',
        body: JSON.stringify(action.body())
      })
      .then(response => response.json())
      .then(json => json)//either return result
      //OR dispatch the result
       .then(json => {

         dispatch({type:action.next_action,payload : json})        
       })
    }

Интегрируйте промежуточное ПО с магазином.

import customMiddleware from './customMiddleware'
const store = createStore(
  reducer,
  applyMiddleware(customMiddleware)
)

Зачем нужно вручную выставлять заголовок. Разве вы не можете просто сохранить JWT в файле cookie, а затем браузер автоматически отправит его вам. Просто убедитесь, что вы указали credentials: 'include' в параметрах HTTP.

Это старый пост, но он набирает несколько просмотров, так что что-то вроде этого будет хорошо работать и легко проверяется.

apiclient.js

import axios from 'axios';

import { setRequestHeadersInterceptor } from './interceptors';

const apiClient = axios.create(
{
  baseUrl: 'https://my.api.com',
  timeout: 3000
});

apiClient.interceptors.request.use(setRequestHeadersInterceptor);

export default apiClient;

interceptors.js

export const setRequestHeadersInterceptor = config =>
{
   // have each interceptor do one thing - Single Responsibility Principle
};

вы должны сохранить свои данные аутентификации в httpOnly secure cookie, тогда передача на / с сервера будет автоматической