令牌过期时如何使用 react-router-dom 重定向用户？

Question

我有一个访问 Flask API 的 React 应用程序。要访问某些 API 路由，用户需要登录。我正在使用 Axios 来执行请求。然后，他收到一个存储在本地存储中的令牌。当这个令牌过期并且用户发出另一个请求时，我想将他重定向到登录页面。但是，我不知道该怎么做。

我正在使用 Axios 响应拦截器处理 API 请求错误。它从本地存储中删除令牌，然后应该将用户重定向到登录页面。由于我使用的是功能组件，我找不到合适的示例（除了下载另一个名为 history 的包）。

我尝试使用 'useHistory' 钩子并从 react-router-dom 重定向（使用正确的 BrowserRouter 设置），但它不起作用。

api.js

import axios from "axios"

import { RemoveAuth } from "./Auth"

export const api = axios.create({
    baseURL: "http://localhost:5000/api/",
    timeout: 15000,
})

// more code

api.interceptors.response.use(null, (error) => {

  if(error.response.status === 401){
    RemoveAuth();
  }

  return error;
});

Auth.js

import { useHistory } from "react-router-dom"

export const RemoveAuth = () => {
  let history = useHistory()
  localStorage.clear();
  history.push('/login')
}

routes.js

import React from "react";

import { BrowserRouter, Switch, Route } from "react-router-dom";

import PrivateRoutes from "./PrivateRoutes";


import Dashboard from "../pages/dashboard";

import Login from "../pages/login";
import Logout from "../pages/logout";

const Routes = () => (
  <BrowserRouter>
    <Switch>
      <PrivateRoutes exact path="/dashboard" component={Dashboard} />
      <PrivateRoutes exact path="/logout" component={Logout} />
      <Route exact path="/login" component={Login} />
    </Switch>
  </BrowserRouter>
);

PrivateRoutes.js

import React from "react";

import { Route, Redirect } from "react-router-dom";

import { AuthLogin } from "../services/Auth";

const PrivateRoutes = ({ component: Component, ...rest }) => (
    <Route
      {...rest}
      render={() => (AuthLogin() ? <Redirect to="/login" /> : <Component />)}
    />
);

export default PrivateRoutes;

提前感谢您的帮助！

Answer 1

最简单的做法是创建自己的历史对象。像这样的：

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

然后在您的提供者中传入您的自定义历史对象：

import { Router } from 'react-router-dom'
import history from './utils/history'

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>
  document.getElementById('root')
);

这允许您在非组件代码中使用您的历史记录。只需将您的历史对象导入您的 Auth.js 文件并使用它：

import { history } from './utils/history'

export const RemoveAuth = () => {
  localStorage.clear();
  history.push('/login')
}

作为额外的好处，现在您的历史记录存在于一个易于模拟的地方，因此围绕它创建测试更加简单。您可以找到有关创建自己的自定义历史记录对象in the docs 的更多信息。