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

我有一个React应用程序，可以访问FlaskAPI。要访问某些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;
});

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

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

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>
);

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;

Auth.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;
});

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

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

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>
);

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;

routes.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;
});

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

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

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>
);

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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“/PrivateRoutes”导入PrivateRoutes；
从“./页面/仪表板”导入仪表板；
从“./pages/Login”导入登录名；
从“./页面/注销”导入注销；
常数路由=（）=>(
);

PrivateRoutes.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;
});

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

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

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>
);

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;

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“./services/Auth”导入{AuthLogin}；
常量PrivateRoutes=（{component:component，…rest}）=>(
（AuthLogin（）？：）}
/>
);
导出默认PrivateRoutes；

---

提前感谢您的帮助

最简单的方法是创建自己的历史对象。大概是这样的：

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')
);

---

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

我认为您只能在react组件中使用“useHistory”。在Auth.js中，您可以通过“window.location.reload（）”来处理它。之后，在PrivateRoute中自动检测并重定向到/login@navand这很好用！这是一个比安装另一个软件包简单得多的解决方案。这将增加代码的复杂性。这样做有什么坏处吗？另一种方法是，你应该从调用api的react组件处理它。是的，没有其他方法可以解决这个问题，对吗？如果你想用你在第一条评论中所说的内容写一个答案，我很乐意将其标记为正确答案！注意，

window.location.reload

会刷新整个页面。这就像在浏览器中点击刷新按钮一样。与反应路由器解决方案非常不同。@jack benson谢谢你的回答！我试图寻找一种不需要安装其他软件包的解决方案。你不应该处理这个吗？react router dom和history有不同的责任吗？您不必显式安装它，因为它已经在您的

节点\u模块中了。它是
react-router-dom
的核心依赖项。