使用React Redux登录后重定向用户?

安朱拉·萨玛拉辛格(Anjula Samarasinghe)

我正在将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,
  ]);
千卡

我知道你想重定向的那一刻,当用户登录和验证。

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

useEffect不是一个事件处理程序useEffect是为“保持同步状态”。

因此,useEffect在您的情况下,无论应用程序是否处于特定状态,都希望进行重定向,无论用户是刚刚登录还是之前已经登录,都将给出该状态。
(例如,请注意,useEffect在首次加载组件时始终至少调用一次,以便最初状态是同步的。)

解决方案1

通过将发生的瞬间包括在状态中,可以将“映射”和事件映射到状态。这并不总是那么琐碎,因为“它刚刚发生”的意思是“此后没有发生任何矛盾的事情”,并且您可能无法监视(甚至不知道)所有冲突的事件。

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

例如

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

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

解决方案2

如果可能的话,我将尝试router.push由于登录事件直接调用Direct(即,不使用useEffect)。这可能需要对代码进行一些重新设计。有时也可能无法以一种干净的方式来实现(我对此不太确定)。

例如:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React Router-登录后如何重定向用户?

使用fetch()登录后如何重定向用户

使用React提交表单后如何重定向用户

如何在登录首页后重定向用户,并使用Spring Security抛出200而不是302?

如何使用auth0-js传递其他信息(登录后重定向用户)

使用 if/else 语句 (JavaScript) 登录后如何重定向用户?

重定向用户(如果未使用jQuery登录html)

使用肥皂服务重定向用户

无法使用javascript重定向用户

使用NetworkExtension框架重定向用户

使用ICS重定向用户?

使用路由器重定向用户,具体取决于登录状态

重定向用户以登录页面,但仍使用他们的搜索查询

用户登录后在 Laravel 上使用模态表单重定向

使用Laratrust登录后,用户明智的重定向

在ASP.Net MVC中使用OpenIdConnect进行身份验证后重定向用户

登录后使用react-router-v5和redux-toolkit重定向页面

Swift - 如果用户已经登录,为什么在重定向用户时我应该使用 viewDidAppear 而不是 viewWillAppear

当重定向用户使用appengine中的oauth2登录时,我们可以指定域吗?

React - 如何检测页面刷新和重定向用户

使用react-router登录后自动重定向

什么是使用php重定向用户的最快方法?

如何使用“ JavaScript Switch语句”重定向用户

如何使用角度路由重定向用户

使用友好的 url htaccess php 重定向用户

使用htaccess重定向用户配置文件

使用Apache和LDAP重定向用户

登录React.js后重定向

react-router-Dom:在React中重定向多个用户登录后的空白页面