如何使用带有redux的Reactjs来正确实现身份验证过程

Question

我目前试图用ReactJS和Redux/toolkit创建一个身份验证过程。

当客户端进入需要验证的页面时，该程序将从store.authReducer中获得isAuth的值

useEffect(()=>{
if(!isAuth) navigate("/signin", {replace: true})
},[navigate])

认证检查器写在路由器的入口点

useEffect(() => {
dispatch(authenticateAsyncAction());
}, [dispatch]);

假设客户端成功登录，并通过web应用程序元素(例如：<Link to="/user/profile">profile</Link>(进入任何页面，则工作正常。

但当客户端通过浏览器url输入字段(例如：https://domain/user/profile(输入路由时，就会出现问题。isAuth的默认值为false，authenticateAsyncAction()为async function，在isAuth更改为true之前，将触发导航并将页面重定向到/signin。

有什么办法解决这个问题吗？

Answer 1

您需要首先检查加载状态，该状态最初为true。完成身份验证后，将加载状态翻转为false，将身份验证状态翻转为true。