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

Question

我正在使用 React redux 和 Next.js，如果用户符合要求，我想将他重定向到某个页面。我将它添加到我的 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,
  ]);

Answer 1

我知道您想在用户登录并通过验证时此刻重定向。

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

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

所以 useEffect 在您的情况下想要在应用程序具有特定状态时重定向，无论用户是刚刚登录还是之前已经登录，都会给出该状态。
(例如，请注意 useEffect 总是在第一次加载组件时至少被调用一次，以便状态最初是同步的。)

解决方案1

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

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

例如

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('...');
    });
});