2

Olá, estou criando um interceptor para o axios que, se caso minha response houver um erro com o status Forbidden (403) o mesmo precisa disparar a Action que inicia o logoff do usuário para forçá-lo a reautenticar.

Isso é necessário porque ela dispara uma série de ações em cascata e já está configurada para tal recurso.

O meu problema é que não sei como conectar uma função ao redux sem ter um componente do React. Até o momento meu interceptor está dessa forma:

import axios from 'axios'
import { logoffRequest } from 'store/actions/userActions'

axios.interceptors.response.use(
  response => response,
  error => {
    if (403 === error.response.status) {
      logoffRequest()
    }
  }
)

A action logoffRequest depende de um redux para que funcione porque ela mexe em um monte de estados da aplicação, inclusive enviando dados ao backend...

O que eu preciso fazer para que seja possível chamar essa Action de dentro desse interceptor?

2 Respostas 2

1

Você pode obter uma instância da sua store e usar o dispatch.

import axios from 'axios'
import { logoffRequest } from 'store/actions/userActions'
import { store } from '/caminho'


axios.interceptors.response.use(
  response => response,
  error => {
    if (403 === error.response.status) {
      store.dispatch(logoffRequest())
    }
  }
)
3
  • Mas se eu fizer isso, quando eu puxar a store de um arquivo eu vou ta chamando novamente a criação dela e vou perder as informações não? 29/05/2019 às 13:02
  • 1
    @LeandroLuk acredito que não, testou esse código?
    – Marconi
    29/05/2019 às 13:23
  • não cheguei a testar, eu resolvi encapsulando a declaração dos interceptors dentro de uma função que recebe a store em si. 29/05/2019 às 13:44
0

Consegui resolver meu problema colocando a declaração dos interceptors em uma função que recebe a store, assim eu posso chamar essa criação dos interceptors logo após a criação da store no index.js assim:

src/lib/axios.interceptors.js

import axios from 'axios'
import { logoffRequest } from 'store/actions/userActions'

export default store => {
  axios.interceptors.response.use(
    response => response,
    error => {
      if (403 === error.response.status) {
        store.dispatch(logoffRequest())
      }
    }
  )
}

src/index.js

// ... outros imports (pra reduzir o exemplo...)

import axiosInterceptors from './lib/axios-interceptors'

const store = configureStore(history, initialState)
const rootElement = document.getElementById('*')

axiosInterceptors(store)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Views />
    </ConnectedRouter>
  </Provider>,
  rootElement
)

Dessa forma eu tenho a garantia que a aplicação irá iniciar contendo o interceptor e que o mesmo está usando a store única e correta que está sendo passada ao projeto geral.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .