Reactjs 如果令牌在react js中的任意点过期，则登录并重定向

我是react js新手，几乎构建了一个Web应用程序，但却陷入了身份验证部分。下面是我打算做什么的解释。请指导我或指出我所做的是错的

webapp没有任何登录/注册。页面的登录url包含令牌（

/home/？token=1234

）

我获取该令牌并通过调用api对其进行验证，如果它有效，我将

logged\u in

状态设置为true，并将其保存在本地存储器中

logged_in

状态变量将传递给所有组件，这些组件呈现响应数据，因此在请求头中，将传递从本地存储获取的令牌。如果在任何时候，响应返回令牌过期，我将

logged_in

状态更改为false

BaseRouter.js（我在app.js中调用并渲染）

从“React”导入{React，useState，useffect}；
从“react router dom”导入{Route，useRouteMatch，Redirect}；
从“/components/Home”导入主页；
从“/components/test”导入测试；
从“/components/New”导入新内容；
从“/hooks/useQuery”导入useQuery；
从“/Services/Rest_call”导入{authentication}；
从“/components/Unauth”导入Unauth；
const local_token=localStorage.getItem（“token”）；
函数BaseRouter（）{
const[logged，setlogged]=使用状态（false）；
const homeMatch=useRouteMatch（“/home”）；//检查url是否为/home
const q=useQuery（）；//从url获取查询参数的函数
useffect（（）=>{
国际单项体育联合会（家庭赛）{
const token=q.get（“token”）；//从url获取令牌
如果（令牌！==null）{
身份验证（令牌）//axios对服务器的post调用以验证令牌
.然后（功能（响应）{
setItem（“Token”，Token）；
setlogged（真）；
})
.catch（函数（错误）{
警报（“身份验证错误”）；
});
}
}
}，[homeMatch，q，logged]）；
//下面的函数将作为道具传递给所有组件，对于在组件中执行的每个操作，令牌将在头中传递给服务器，如果令牌在任何阶段过期，请将登录声明更改为false。
const update_loggedin_state=（状态）=>{
setlogged（假）；
};
如果（！已记录）{
if（本地_令牌！=null）{
setlogged（真）；
}否则{
return；//显示令牌为无效消息
}
}
返回(
(
)}
/>
(
)}
/>
;
);
}
导出默认BaseRouter；

Home.js:

import { React, useEffect } from "react";
import { Button } from "./Button";
import { Link, useRouteMatch } from "react-router-dom";
import "./Navbar.css";
import "./Home.css";
import useQuery from "../hooks/useQuery";

function Home(props) {
  //operation to make a get call to server to fetch all the user data. token will be passed in header.
  //if response is token expired, update the logged_in state to false(this will redirect to /login if user clicks on any other link, can this be made to redirect to /login as soon as the response returned is 401?)
  props.update_login(false);
     
return (
   
      <Link to="/test" className="btn-mobile">
        <Button id="test" buttonStyle="btn--secondary">
          test
        </Button>
      </Link>
      <Link to="/new" className="btn-mobile">
        <Button id="new" buttonStyle="btn--secondary">
          New
        </Button>
      </Link>
      <hr/>
      
    </div>
  );
}

export default Home;

从“React”导入{React，useffect}；
从“/Button”导入{Button}；
从“react router dom”导入{Link，useRouteMatch}；
导入“/Navbar.css”；
导入“/Home.css”；
从“./hooks/useQuery”导入useQuery；
功能主页（道具）{
//对服务器进行get调用以获取所有用户数据的操作。令牌将在标头中传递。
//如果响应已过期，则将logged_in状态更新为false（如果用户单击任何其他链接，这将重定向到/login，是否可以在返回的响应为401时立即重定向到/login？）
道具。更新_登录（错误）；
返回(
测试
新的

);
}
导出默认主页；

我面临的问题是：

如果令牌在url中传递，则对服务器的post调用需要时间来返回响应，因此状态

logged\u in

在一段时间后更新，然后重定向到/login，这表明令牌无效消息

若url中并没有传递任何令牌，且本地存储为空，则不会显示任何消息，只会显示一个空白屏幕

问题的原因是什么？有没有更好的方法来进行此验证？非常感谢您的帮助

import { React, useEffect } from "react";
import { Button } from "./Button";
import { Link, useRouteMatch } from "react-router-dom";
import "./Navbar.css";
import "./Home.css";
import useQuery from "../hooks/useQuery";

function Home(props) {
  //operation to make a get call to server to fetch all the user data. token will be passed in header.
  //if response is token expired, update the logged_in state to false(this will redirect to /login if user clicks on any other link, can this be made to redirect to /login as soon as the response returned is 401?)
  props.update_login(false);
     
return (
   
      <Link to="/test" className="btn-mobile">
        <Button id="test" buttonStyle="btn--secondary">
          test
        </Button>
      </Link>
      <Link to="/new" className="btn-mobile">
        <Button id="new" buttonStyle="btn--secondary">
          New
        </Button>
      </Link>
      <hr/>
      
    </div>
  );
}

export default Home;