反应身份验证路由器 v6

Question

我正在尝试使用身份验证逻辑构建一个简单的反应应用程序..可以在此处找到存储库

我在尝试访问/reports遇到了问题，因为即使 useEffect 挂钩运行并验证用户身份，应用程序也会不断将我重定向到/login页面。

可能缺少什么？

谢谢

Answer 1

我认为你从PrivateRoute的回报应该改变。
一开始isAuthenticated为假， loading为真

isAuthenticated && !loading === false

所以你的<Navigate replace to="/login" />被返回。

相反，您可以将加载状态移动到上面的某个位置以使其像这样

function PrivateRoute({ children }) {
  /* ... */

  if (loading) {
    return <SomeSpinner />
  }

  return isAuthenticated
    ? children
    : <Navigate replace to="/login" />;
}

而且您不会立即进行重定向，而是会等待加载