react-router + Axios 拦截器。如何进行重定向？

IT技术 reactjs react-router axios react-router-v4 mobx
2021-05-12 07:01:26

我有一个 axios 拦截器，当用户被强制注销（由于令牌过期）时，我想返回我的主页。

我不确定如何将react-router传递给它。我正在使用 mobx 但不确定这是否能帮助我解决这个问题。

export const axiosInstance = axios.create({
    baseURL: 'https://localhost:44391/api',
    timeout: 5000,
    contentType: "application/json",
    Authorization: getAuthToken()
  })

  axiosInstance.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    const originalRequest = error.config;
    if(error.code != "ECONNABORTED" && error.response.status === 401 && !originalRequest._retry){
      originalRequest._retry = true;
      return axiosInstance.post("/tokens/auth",{
        "refreshToken": getRefreshToken(),
        "grantType": "refresh_token"
    }).then(response => {
        localStorage.authentication = JSON.stringify(response.data);
        updateAuthInstant();
        return axiosInstance(originalRequest)
      });

    }
   return Promise.reject(error);
  });
2个回答

您应该添加历史npm 包。有了它，您可以创建浏览器历史记录并在应用程序的其他地方使用它。

例如：

// routing.js

import createHistory from 'history/createBrowserHistory';

export const history = createHistory();

在包含路由的组件中。

import { Route, Router } from 'react-router-dom';
import { history } from './routing.js';

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const Routes = () => (
  <Router history={history}>
    <div>
      <Route exact path='/route1' component={ComponentA} />
      <Route exact path='/route2' component={ComponentB} />
    </div>
  </Router>
);

在您想要控制路由的其他文件中：

import { history } from './routing.js';

function changeRoute() {
  // things happening here..
  history.push('/route2');
}

调用时changeRoute()，路径更新为/route2并将ComponentB呈现。

window.location.href = '/user/login'
其它你可能感兴趣的问题
上一篇从 API 获取数据的最佳方式 下一篇如何在react传单中使用 polylinedac​​orator