How to redirect from axios interceptor with react Router V4?

在React Router V4中要从axios拦截器进行重定向操作，你可以通过以下步骤实现：

步骤1: 创建一个新的history实例

首先，您需要创建一个可以在应用的任何地方使用的history对象。这是因为axios拦截器是一个普通的JS模块，它并不直接集成在React组件的生命周期内。通常可以使用history库来创建一个独立的history对象。

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

export default createBrowserHistory();

步骤2: 使用Router时传入自定义的history

在你的React应用中，使用刚刚创建的history实例来初始化Router。

javascript
// App.js
import { Router } from 'react-router-dom';
import history from './history';

function App() {
  return (
    <Router history={history}>
      {/* 应用的其他部分 */}
    </Router>
  );
}

步骤3: 在axios拦截器中使用history进行重定向

现在，你可以在axios的拦截器中导入history对象，并在需要时调用history.push或history.replace来更改路由。

javascript
// axios.js
import axios from 'axios';
import history from './history';

axios.interceptors.response.use(response => {
    return response;
  }, error => {
    if (error.response.status === 401) { // 假设401状态码需要重定向到登录页
      history.push('/login');
    }
    return Promise.reject(error);
  }
);

示例：重定向到登录页面

假设你的应用在用户认证失败时（例如接收到HTTP 401错误），需要重定向用户到登录页面。你可以在axios拦截器中检查错误状态码，并使用history对象重定向用户。

以上步骤展示了如何在React Router V4中结合使用axios拦截器和history对象来处理应用级的重定向。这种方法的好处是可以在应用的任何部分轻松重定向用户，而不仅仅是在React组件内部。