使用react redux登录后重定向用户？

Posted 2023-02-22

【中文标题】使用react redux登录后重定向用户？

【英文标题】：Redirect user after login with react redux?

【发布时间】：2021-05-25 09:46:54

【问题描述】：

我正在使用带有 Next.js 的 react redux，如果他符合要求，我想将用户重定向到某个页面。我将它添加到我的useEffect 中并且它可以工作，但是每次当我返回主页时，它都会再次重定向到同一页面。如果我刷新将清除 redux 状态的页面，它工作正常。

useEffect(() => 
    const validateUser = (services: ServiceType[]) => 
      if (services.length === 0) 
        router.push('/dashboard/expert/onboard');
       else 
        router.push(
          '/dashboard/expert/[expertname]?view=overview',
          `/dashboard/expert/$userProfile.expertProfile.name?view=overview`
        );
      
    ;
    if (userProfile) 
      if (userProfile.isVerified) 
        if (nextPath && nextPath.as) 
          router.push(nextPath.href, nextPath.as);
         else if (userProfile.isExpert) 
          setModalVisible(false);
          if (services) 
            validateUser(services);
          
          // setAlreadySignedUpModalVisible(true);
         else if (loginResponse && loginResponse.expertApplications.rejected > 0) 
          setModalVisible(false);
          setApplicationRejectedModalVisible(true);
         else if (loginResponse && loginResponse.expertApplications.pending > 0) 
          setModalVisible(false);
          setApplicationReceivedModalVisible(true);
          setIsPendingExpert(true);
         else 
          if (nextPath) 
            router.push(nextPath.href);
          
          setModalVisible(false);
        
       else 
        setModalVisible(false);
        setEmailVerifyModalVisible(true);
      
    
  , [
    loginResponse,
    setAlreadySignedUpModalVisible,
    setApplicationReceivedModalVisible,
    setApplicationRejectedModalVisible,
    setEmailVerifyModalVisible,
    setModalVisible,
    userProfile,
    nextPath,
    setIsPendingExpert,
    services,
  ]);

【问题讨论】：

在调用router.push 后设置用于导航到其默认状态的变量可能是一种可能的解决方案

【参考方案1】：

我知道您希望在用户登录并验证时重定向。

这是对某些特定事件的反应，因此您需要某种“事件处理程序”。

useEffect 不是事件处理程序，useEffect 用于“保持状态同步”。

因此，在您的情况下，useEffect 想要在应用具有特定状态时进行重定向，无论用户是刚刚登录还是之前已经登录。 （例如，请注意 useEffect 在第一次加载组件时总是至少被调用一次，因此状态最初是同步的。）

解决方案 1

通过将 moment-it-happend 包含到状态中，可以将某种“映射”和事件映射到状态。这并不总是微不足道的，因为“它只是发生了” 意味着 “从那以后没有发生任何矛盾的事情”，你可能无法监控（甚至知道）所有冲突事件。

因此，您的事件状态不仅是“已登录并已验证”。我认为您可以将所需的状态描述为： "登录状态已更改，因为用户在页面上且已登录且有效"

例如

const [ hasLoggedInSinceOnPage, setHasLoggedInSinceOnPage ] = useState(false);
...
loginRequest.then( (xyz)=>
    yourLoginCode(xyz);
    setHasLoggedInSinceOnPage(true);
);
...
useEffect(()=>
    setHasLoggedInSinceOnPage(false);
, [ currentPage ]);

另一个想法是像wasRedirectedAlready 这样的状态。

解决方案 2

如果可能，我会尝试直接调用 router.push 作为登录事件的结果（即不使用 useEffect）。这可能需要重新设计代码。有时也可能无法以一种干净的方式实现（我对此不太确定）。

例如：

loginRequest.then( (xyz)=>
    validate(xyz).then( (isValid)=>
        router.push('...');
    );
);