阻止用户访问登录或注册页面，如果登录，Firebase在React中验证

Question

我试图阻止用户访问登录和注册页面，一旦他登录。我试图在这里或Youtube上找到一些解决方案，但没有找到我想要的。与此同时，我试图自己实现这一点，我设法用useEffect钩子做到了这一点。我不确定这是否是最佳实践，所以检查我的代码下面，如果有人知道一个更好的方法，这将意味着很多对我来说，因为我是一个初学者，我还有很多未知。要清楚的是，一切都很好，只是想知道如果user存在，使用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来检查是否有用户可以重定向到home

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

Answer 1

解决方案可以是创建一个组件作为ProtectedHomeRoute，做相反的事情，类似于你的useEffect在Signin;虽然，不需要使用效果。例如:

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…