React 路由器 + Axios 拦截器。如何进行重定向？

Posted 2023-02-22

【中文标题】React 路由器 + Axios 拦截器。如何进行重定向？

【英文标题】：React Router + Axios interceptors. How to Do a redirect?

【发布时间】：2018-12-25 13:53:48

【问题描述】：

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

我不确定如何将反应路由器传递给它。我正在使用 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);
  );

【问题讨论】：

在渲染***组件之前是否需要进行任何可能重定向的 ajax 调用？

我不确定您的意思，最常见的情况是发送请求，用户访问令牌已过期，尝试使用刷新令牌尝试。如果失败，将他们踢回登录页面。

【参考方案1】：

您应该添加 history 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。

【讨论】：

啊，我在使用 createBrowserHistory 时从来没有想过把它放在它自己的文件中。正在使用它来填充我的商店，例如 const browserHistory = createBrowserHistory(); const history = syncHistoryWithStore(browserHistory, routingStore);不过，请快速提问。 history 和 browserHistory 之间有区别吗

browserHistory 是 react-router 2 和 3 的一部分。在 react-router 4 中，它被组合为 BrowserRouter。这是用于基本的历史 API 使用。如果你自己创建 browserHistory，你可以做这样的事情:-)。

我应该切换到 createHistory() 而不是 createBrowserHistory()

我想我不明白你的意思。您是指我在 routing.js 示例中的导入方式吗？在该示例中，我将从history 包中导入的createBrowserHistory 函数命名为createHistory。这可以任意命名。

嗯，对了，我以为这实际上是函数名称，但我猜这是导出的默认函数？

【参考方案2】：

window.location.href = '/user/login'

【讨论】：

这会重新加载完整的应用程序，而不是最好的方法