无法在React js中浏览受保护的路由[重复]

Question

这是受保护的路线代码：

const ProtectedRoute = (props) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await fetch("http://localhost:3000/checkAuth", {
          credentials: "include",
        });
        const data = await response.json();
        if (data.message === "authenticated") {
          setIsAuthenticated(true);
        } else {
          setIsAuthenticated(false);
        }
      } catch (error) {
        setIsAuthenticated(false);
        console.error("Error checking authentication:", error);
      }
    };

    checkAuth();
  }, []);

  return isAuthenticated ? <Route {...props} /> : <Navigate to="/" />;
};

export default ProtectedRoute;

这是App.jsx代码：

function App() {
  return (
    <>
      <Navbar />
      <Router>
        <Routes>
          <Route element={<ProtectedRoute />}>
            <Route path="/new" element={<Main />} />
            <Route path="/passshow" element={<PassShow />} />
          </Route>
          <Route path="/" element={<Home />} />
          <Route path="/signup" element={<Signup />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

我无法前往

"/new"

或

"/passhow"

。我的后端正确地将消息显示为 “已验证”。

我猜我的受保护路由代码有问题。那么，有人可以检查一下代码并告诉我我遗漏了什么或做错了什么吗？

任何建议都将非常感激。

Answer 1

问题

在收到响应之前以及用户未经身份验证时，对

false

使用相同的状态

isAuthenticated

。

默认情况下，

isAuthenticated

的值为

false

。这使得它导航到

/

路径，而无需等待获取响应。

解决方案

在接收获取响应之前应保持不同的状态。并且应该添加一个Loading组件。

const [isAuthenticated, setIsAuthenticated] = useState(null);

return isAuthenticated === null ? <Loading/> : isAuthenticated ? <Route {...props} /> : <Navigate to="/" />;

通过添加第三种状态，组件在渲染后将不会立即导航到

/

路径。