reactjs - 阻止用户在登录后访问登录或注册页面，React 中的 Firebase 身份验证

Question

我试图阻止用户在登录后访问登录和注册页面。我试图在这里或 Youtube 找到一些解决方案，但没有找到我想要的东西。与此同时，我试图自己实现这一目标，并设法使用 useEffect 钩子(Hook)来做到这一点。我不确定这是否是最佳实践，所以请检查下面的代码，如果有人知道更好的方法，这对我来说意义重大，因为我是初学者，而且我仍然有很多未知数。为了清楚起见，一切正常，只是想知道如果用户存在，使用 useEffect 导航回主页是否是一个好习惯。

App.js

const App = () => {
  return (
    <Router>
      <UserAuthContextProvider>
        <Routes>
          <Route
            path="/home"
            element={
              <ProtectedHomeRoute>
                <Home />
              </ProtectedHomeRoute>
            }
          />
          <Route path="/" element={<Signin />} />
          <Route path="/signup" element={<Signup />} />
        </Routes>
      </UserAuthContextProvider>
    </Router>
  );
};

这是 UserAuthContextProvider 的一部分，我在其中设置用户 onAuthStateChange

const [user, setUser] = useState("");
const [loading, setLoading] = useState(true);
useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <userAuthContext.Provider
      value={{
        user,
        signUp,
        signIn,
        facebookSignIn,
        logout,
      }}
    >
      {!loading && children}
    </userAuthContext.Provider>
  );

在 Signin 组件中，我只是使用 useEffect 来检查是否有用户重定向回主页

useEffect(() => {
    if (user) {
      navigate("/home");
    }
  });

Answer 1

解决方案可以创建一个组件作为 ProtectedHomeRoute，执行相反的操作，类似于 Signin 中的 useEffect；虽然如此，没必要使用Effect。 例如:

const PublicRoute = ({children}) => {
   const {user} = useUserAuth()
   return user?<Navigate to='/home'>:children
}

那么在你的 App.js 中:

const App = () => {
  return (
    <Router>
      <UserAuthContextProvider>
        <Routes>
          <Route
            path="/home"
            element={
              <ProtectedHomeRoute>
                <Home />
              </ProtectedHomeRoute>
            }
          />
          <Route path="/" element={<PublicRoute>
            <Signin />
          </PublicRoute>} />
          <Route path="/signup" element={<PublicRoute>
             <Signup />
          </PublicRoute>} />
        </Routes>
      </UserAuthContextProvider>
    </Router>
  );
};

即使认为这可以是一个解决方案，刷新页面也会导致数据丢失(因为刷新时 user 设置为 '')。我建议您使用一些库来更改此行为，如 Redux , Redux persist ...