Как написать перенаправление внутри перехватчиков axios без перезагрузки в React JS - PullRequest
Новая
       32

Как написать перенаправление внутри перехватчиков axios без перезагрузки в React JS

3 голосов
/ 09 июля 2019

Я использовал перехватчики axios для поддержки внутренних ошибок сервера.Мне нужно перенаправить на другой URL, если в ответе произошла ошибка без перезагрузки.Ниже кода я использовал location.href.Так что это перезагрузка.Мне нужно решение для перенаправления без обновления страницы.

Я попытался "Redirect" в реакции-маршрутизатор-дом.Но это не работает для меня. 

export function getAxiosInstance() {
    const instance = axios.create();
    const token    = getJwtToken();

    // Set the request authentication header
    instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;

    // Set intercepters for response
    instance.interceptors.response.use(
        (response) => response,
        (error) => {
            if (config.statusCode.errorCodes.includes(error.response.status)) {
                return window.location.href = '/internal-server-error';
            }

            return window.location.href = '/login';
        }
    );

    return instance;
}

Может кто-нибудь помочь мне решить эту проблему?

Ответы [ 2 ]

1 голос
/ 09 июля 2019

Это позволит использовать кэширование импорта : 

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})


// index.js (example)
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)


// interceptor.js
import axios from 'axios';
import cookie from 'cookie-machine';
import history from '../history';

axios.interceptors.response.use(null, function(err) {
  if ( err.status === 401 ) {
    cookie.remove('my-token-key');
    history.push('/login');
  }

  return Promise.reject(err);
});
0 голосов
/ 09 июля 2019

Вы должны использовать объект истории, чтобы выдвинуть новое местоположение. Проверьте этот вопрос Как перейти к истории в React Router v4? . Это должно помочь.

...