防止注销用户访问整个网站

Question

我正在开发一个使用 React 和 firebase 构建的管理网站，我希望整个网站只能由登录的人访问。我想从一个地方完成此操作，而不是必须添加它到每个页面，这就是它所需要的：

firebase.auth().onAuthStateChanged(user => {
  if(!user) {
    window.location = 'login.html'; //If User is not logged in, redirect to login page
  }
});

我正在考虑

app.js

页面，但我遇到了问题。这是我的尝试：

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState();
  const navigate = useNavigate();

  const setLoggedInFn = () => {
    setIsLoggedIn(true);
  };

  const setLoggedOutFn = () => {
    setIsLoggedIn(false);
  };

  useEffect(() => {
    if (isLoggedIn === false) {
      navigate("/");
    }
  }, [isLoggedIn, navigate]);

  return (
    <>
      <BrowserRouter>
        <Navigation setLoggedIn={setLoggedInFn} setLoggedOut={setLoggedOutFn} />
        <Routes>
          <Route index element={<Home />} />
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

但是我收到以下错误：

useNavigate() 只能在组件上下文中使用。

我理解这个错误，但我想知道是否可以在像 app.js 这样的地方完成它

仅供参考，导航位于每个页面中，因此我决定这就是我应该监视登录状态的地方。 一段

Navigation.js

useEffect(() => {
    const unsubscribe = onAuthStateChanged(
      auth,
      (user) => {
        // console.log(user);
        if (user) {
          setUserId(user.uid);
          setIsLoggedInFn();
        } else {
          setUserId("");
          setIsLoggedOutFn();
        }
      },
      []
    );

    return unsubscribe;
  }, []);

有没有办法从一个地方屏蔽整个网站？

Answer 1

我认为最好检查它是否未记录，然后只预览登录组件而不进行导航。 这是实现它的方法：

import {Login} from "./path/to/login/component"
export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState();

  const setLoggedInFn = () => {
    setIsLoggedIn(true);
  };

  const setLoggedOutFn = () => {
    setIsLoggedIn(false);
  };

  return (
    <>
      {isLoggedIn?(
        <BrowserRouter>
        <Navigation setLoggedIn={setLoggedInFn} setLoggedOut={setLoggedOutFn} />
        <Routes>
          <Route index element={<Home />} />
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page />} />
        </Routes>
      </BrowserRouter>
     ):(
       <Login/>
     )}
    </>
  );
}

注意：不要忘记将登录组件路径更改为正确的路径。 我希望它有帮助