React PrivateRoute 不返回布尔值，但承诺

Question

我正在创建一个 privateRoute 文件来检查服务器端的用户令牌并检查它是否仍然有效。 fetch 函数应该 return true 或 false 取决于它是否有效，并且当这个值被检查时，决定它是去出口还是去 accessrestricted 页面。

const tokenString = localStorage.getItem('token');

const PrivateRoutes = () => {
 
  const handleSubmit = async e => {
      const res = await Rolcheck(tokenString);
      return res;
  }
  const auth = handleSubmit();

  return (auth ? <Outlet/> : <Restricted/>)

}

export default PrivateRoutes

请注意，Rolcheck（以我将来用它做的事情命名）是一个异步函数，它将令牌发送到数据库并在那里进行比较，然后 returns true 或 false 取决于此.

在 console.log() 之后，如果我在 handleSubmit 中检查，我可以获得正确的预期布尔选项，但是，const auth 得到了一个承诺。我不确定这是否由于 async/await.

而变得混乱

Answer 1

抱歉，我只是在这里回复写一个更完整的代码。你试过这个吗：

const tokenString = localStorage.getItem('token');

const PrivateRoutes = () => {

  const handleSubmit = async () => await Rolcheck(tokenString);

  const auth = await handleSubmit();

  return (auth ? <Outlet/> : <Restricted/>)

}

export default PrivateRoutes

Answer 2

const tokenString = localStorage.getItem('token');

const PrivateRoutes = () => {
  const [state,setState] = useState(undefined)

  useEffect(()=>{
     Rolcheck(tokenString).then(setState).catch(()=>setState(false))
  },[])
 
 if(state === undefined)
   return <React.Fragment/>

  return (auth ? <Outlet/> : <Restricted/>)
}

export default PrivateRoutes

React PrivateRoute 不返回布尔值，但承诺

React PrivateRoute not returning boolean, but promise

router

reactjs