是否有一种标准方法可以验证用户在使用 React 应用程序时拥有的令牌？

Question

  
    function App() {

    return (
      <>
        <div>
        <InitUser/>
          <Routes>
            <Route path="/" element={<Home />}/>
            <Route path="/login" element={<Login />} />
            <Route path="/signup" element={<Signup />}/>
          </Routes>
        </div> 
      </>
    )
    }

   function InitUser(){
      const navigate=useNavigate();
      useEffect(()=>{
      const init=async()=>{
       const token=localStorage.getItem('token');
     console.log("Inside init");
     if(!token){
        navigate("/login");
        return;
     }
     let response;
     try{
      response = await axios.get("http://localhost:3000/auth/me",{
      headers:{
        'token':'Bearer '+token
      }
    });
     }catch(e){
       localStorage.removeItem('token');
        navigate("/login");
    }
    const {status}=response?.data;
     if(!status){
      localStorage.removeItem('token');
      navigate("/login")
    }
    }

     init();
   },[]);

   return(
    <div></div>
   )
}

export default App

这是 React 中正确的处理方式吗？我还想过使用商店并在每次加载页面时检查它，但这似乎很奇怪我会重复代码。从我读过的文章中，他们建议使用 ContextProvider，但最终仍然在每个页面上编写相同的代码。那么 React 中有解决这个问题的标准方法吗？

Answer 1

处理身份验证的标准方法因您使用的技术而异。 就您而言，您似乎正在使用

react-router

。对于此库，对某些页面强制执行身份验证要求的最常见方法是通过私有路由。本质上，您想要创建一个包装器路由

<YourPrivateRoute />

。如果用户未经身份验证，该路由中包含的任何子级都会重定向到

/signup

。

确切的实现因您的特定版本的

react-router

而异，我们对此未知。但这之前已经在这里做过很多次并回答过。只需搜索“react-router 私有路由”即可。以下是一些可能的答案：

如何在react-router-dom@v6中使用私有路由

https://www.robinwieruch.de/react-router-private-routes/