Question

我有一个身份验证上下文，该身份验证上下文使用useEffect从sessionStorage中获取数据，并设置一个全局user变量以通过上下文api传递。

在每条受保护的路线上，我的useEffect内都有一个useEffect来检查用户是否已登录，以及是否没有将用户送回登录页面。

但是，专用内部的const router = useRouter() const [ user, setUser ] = useState(null) const [ loading, setLoading ] = useState(false) useEffect(() => { async function loadUserFromSessionStorage() { const token = sessionStorage.getItem('accessToken') if (token) { const { data: { customer: { name } } } = await axios.get(`http://localhost:3002/customer/token/${token}`) if (name) setUser(name) } setLoading(false) } loadUserFromSessionStorage() }) useEffect(() => { if(!!user) router.push('/') }, [ user ]) return ( <AuthContext.Provider value={{ isAuthenticated: !!user, loading, user}} > {children} </AuthContext.Provider> ) }在身份验证上下文之前触发，因此，看不到身份验证数据，每次都将客户发送到登录页面

  return () => {
    const { user, isAuthenticated, loading } = useContext(AuthContext);
    const router = useRouter();
    useEffect(() => {
      if (!isAuthenticated && !loading){
        router.push("/login")
      }
      
    }, [ loading, isAuthenticated ]);

    return (
      isAuthenticated && <Component {...arguments} />
    )
  };
}

这是我的HOC：

apt search <package>

有人知道如何解决吗？

Answer 1

您可能知道也可能不知道，HOC中的useEffect挂钩将在从会话状态加载用户的挂钩完成之前触发。

您出错的地方是将加载状态默认设置为false：

const [ loading, setLoading ] = useState(false)

在HOC效果挂钩中执行此操作

if (!isAuthenticated && !loading)...

该表达式在第一遍将是正确的，您将被重定向到登录页面。只需改用useState（true）。

Answer 2

您没有将loading变量传递到上下文中，因此当您在HOC中解构上下文值时，它看起来像：

{
    user: undefined,
    isAuthenticated: false,
    loading: undefined
}

根据您的逻辑，它将重定向到登录名。

请尝试在AuthContext.Provider中添加其他两个变量，看看是否有帮助。

身份验证上下文ReactJs之前的HOC useEffect触发

2 个答案: