Reactjs 如何创建具有承诺的受保护路由

我用钩子保护我的路线。我遇到的问题是，检查用户身份验证状态的调用返回一个承诺，因此钩子返回默认值，即a，然后身份验证状态不再有用，因为我们已经重定向了

那么，在完成身份验证检查之前，我如何等待从钩子返回呢？这是我的密码：

export function ProtectedRoute(props){

const [loggedIn, setLoggedIn] = useState(false);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
    async function fetchUser() {
        let user = null;

        try {
            user = await Auth.currentAuthenticatedUser()
            if (user) {
                setLoggedIn(true);
            } else
            {
                setLoggedIn(false);
            }
        } catch (e) {
            setLoggedIn(false);
        }
    }
    fetchUser()
});

console.log("ProtectedRoute: returning " + loggedIn);
if (loggedIn)
    return props.component
else
    return <Redirect to={{pathname: '/login'}}/>

导出功能受保护路由（道具）{
const[loggedIn，setLoggedIn]=useState（false）；
//与componentDidMount和componentDidUpdate类似：
useffect（（）=>{
异步函数fetchUser（）{
让user=null；
试一试{
user=wait Auth.currentAuthenticatedUser（）
如果（用户）{
setLoggedIn（真）；
}否则
{
setLoggedIn（假）；
}
}捕获（e）{
setLoggedIn（假）；
}
}
fetchUser（）
});
log（“ProtectedRoute:returning”+loggedIn）；
if（loggedIn）
返回道具组件
其他的
返回

---

}

我将添加一个新状态，

加载

，直到ist

true

，只呈现一个加载组件：

    export default ProtectedRoute(props) {
    
      const [loggedIn, setLoggedIn] = useState(false);
      const [loading, setLoading] = useState(true);
      
      useEffect(() => {
        (async () => {
          try {
            setLoading(true);
            const user = await Auth.currentAuthenticatedUser();
            setLoggedIn(!!user);
          } catch (error) {
            console.log(error);
            setLoggedIn(false);
          } finally {
            setLoading(false);
          }
        })();
      }, []);
    
      if(loading) return <h1>Loading...</h1>;
        
      if (loggedIn) return props.component
    
      return <Redirect to={{ pathname: '/login' }}/>
  }

导出默认的ProtectedRoute（道具）{
const[loggedIn，setLoggedIn]=useState（false）；
const[loading，setLoading]=useState（true）；
useffect（（）=>{
（异步（）=>{
试一试{
设置加载（真）；
const user=wait Auth.currentAuthenticatedUser（）；
setLoggedIn（！！用户）；
}捕获（错误）{
console.log（错误）；
setLoggedIn（假）；
}最后{
设置加载（假）；
}
})();
}, []);
如果（装载）返回装载。。。；
if（loggedIn）返回道具组件
返回
}

我将添加一个新状态，

加载

，直到ist

为true

，只呈现一个加载组件：

    export default ProtectedRoute(props) {
    
      const [loggedIn, setLoggedIn] = useState(false);
      const [loading, setLoading] = useState(true);
      
      useEffect(() => {
        (async () => {
          try {
            setLoading(true);
            const user = await Auth.currentAuthenticatedUser();
            setLoggedIn(!!user);
          } catch (error) {
            console.log(error);
            setLoggedIn(false);
          } finally {
            setLoading(false);
          }
        })();
      }, []);
    
      if(loading) return <h1>Loading...</h1>;
        
      if (loggedIn) return props.component
    
      return <Redirect to={{ pathname: '/login' }}/>
  }

导出默认的ProtectedRoute（道具）{
const[loggedIn，setLoggedIn]=useState（false）；
const[loading，setLoading]=useState（true）；
useffect（（）=>{
（异步（）=>{
试一试{
设置加载（真）；
const user=wait Auth.currentAuthenticatedUser（）；
setLoggedIn（！！用户）；
}捕获（错误）{
console.log（错误）；
setLoggedIn（假）；
}最后{
设置加载（假）；
}
})();
}, []);
如果（装载）返回装载。。。；
if（loggedIn）返回道具组件
返回
}

找到了一个解决方案…必须为isAuthenticated默认为“true”，如果不是这样，则重定向（重定向似乎破坏了我最初代码中的逻辑）

导出函数ProtectedRoute（{component:component，…rest}）{
const[isAuthenticated，setLoggedIn]=useState（true）；
useffect（（）=>{
（异步（）=>{
让user=null；
试一试{
user=wait Auth.currentAuthenticatedUser（）
如果（用户）{
setLoggedIn（真）；
}否则
{
setLoggedIn（假）；
}
}捕获（e）{
setLoggedIn（假）；
}
})();
});
返回(
是否已认证？：
}
/>
);

---

}

找到了一个解决方案…必须为isAuthenticated默认为“true”，如果不是这样，则重定向（重定向似乎破坏了我最初代码中的逻辑）

导出函数ProtectedRoute（{component:component，…rest}）{
const[isAuthenticated，setLoggedIn]=useState（true）；
useffect（（）=>{
（异步（）=>{
让user=null；
试一试{
user=wait Auth.currentAuthenticatedUser（）
如果（用户）{
setLoggedIn（真）；
}否则
{
setLoggedIn（假）；
}
}捕获（e）{
setLoggedIn（假）；
}
})();
});
返回(
是否已认证？：
}
/>
);

---

}

如果1分钟内没有服务器响应，会发生什么情况？（或者用户手动减慢应用程序的速度？）-路由没有得到保护-我不太关心这一点，因为除非用户登录（没有有效的JWT令牌），否则用户将无法在该路由中执行任何操作。顺便说一句，这种“保护”主要是装饰性的。真正的保护是在后端完成的。另一方面，如果服务器响应时间过长，则需要重新构建应用程序。故障需要快速发生。如果1分钟内没有服务器响应，会发生什么？（或者用户手动减慢应用程序的速度？）-路由没有得到保护-我不太关心这一点，因为除非用户登录（没有有效的JWT令牌），否则用户将无法在该路由中执行任何操作。顺便说一句，这种“保护”主要是装饰性的。真正的保护是在后端完成的。另一方面，如果服务器响应时间过长，则需要重新构建应用程序。失败需要快速发生。它会立即重定向，因为对Cognito的调用需要一段时间，然后组件从未加载。它会立即重定向，因为对Cognito的调用需要一段时间，然后组件从未加载。