React Router - 身份验证后重定向延迟

Posted 2023-03-27

【中文标题】React Router - 身份验证后重定向延迟

【英文标题】：React Router - Redirection after authentication with delay

【发布时间】：2021-10-20 21:24:14

【问题描述】：

我正在尝试在我的 react 应用程序中的身份验证完成后重定向。我使用 cognito（使用 aws amplify）进行身份验证（SSO）。身份验证完成后，cognito 会将应用程序重定向到我们在 cognito 中指定的页面 (/Dashboard)。一旦身份验证完成，我们的应用页面就会刷新，因为 cognito 会重定向到特定页面。

这里的问题是，当 cognito 重定向到我们指定的端点 url 时，成功登录后，令牌数据会延迟添加到 localstorage。这导致我的自定义路由组件检查本地存储并说没有令牌并且用户未登录。

因此，作为一种解决方法，我检查 '/Dashboard' (Dashboard.js) 中的条件，如果 userDataInLocalstorage? <ShowAppHome> : <div>Loading...<div>

现在，如果没有登录的人来点击“/Home” - 他们只会看到Loading...。它不会重定向到 /Login

我心中的方法：添加一个 5 秒的计时器或其他东西来检查 cognito 是否放置了令牌。 5 秒后，再次检查令牌是否存在，如果没有则重定向到 /Login

这东西有点乱，但如果有人能提供一些想法，我会很感激。

用户登录：登录 > Cognito > cognito 重定向到 /Dashboard > Dashboard 检查用户及其真实性

用户未登录：点击/仪表板>仪表板检查用户及其错误>显示正在加载...

App.js

<Switch>
      <PublicRoute component=Login path="/Login" exact />  //To redirect to /Dashboard/Home if  user is already logged in and hits /Login
      <Route path="/" exact>
          <Redirect to="/Login" />
      </Route>
      <Route component=Dashboard path="/Dashboard" />
      <Route component=PageNotFound />
</Switch>

PublicRoute.js

function PublicRoute( component: Component, ...rest ) 
  const [userData, setUserData] = useState()
  const validateCurrentUser = async () => 
    try 
      const data = await Auth.currentAuthenticatedUser();
      setUserData(data.attributes)
      console.log("Public route currentAuthenticatedUser", userData);
     catch (err) 
      console.log("Public route Please login to continue", userData);
    
  ;
  validateCurrentUser();

  return (
    <div>
      <Switch>
        <Route
          ...rest
          render=(props) =>
            userData ? <Redirect to="/Dashboard/Home" /> : <Component ...props /> 
          
        />
      </Switch>
    </div>
  );

Dashboard.js

userDataInLocalstorage? (
        <SideNavComponentForAllPages/>
        <Switch>
            <Route path="/Dashboard" exact>
              <Redirect to="/Dashboard/Home" />
            </Route>
            <Route component=Home path="/Dashboard/Home" exact />
            <Route component=Home2 path="/Dashboard/Home2" exact />
            
      </Switch>

) : <div>Loading...<div>

【参考方案1】：

如何将检查 localStorage 的函数封装在 useEffect() 中？这将确保组件在检查发生之前已经渲染。

【讨论】：

我也试过了，但没用 :( 我想添加一个 5 秒的计时器，然后再次检查本地存储中的数据。如果数据不存在，我打算重定向到 /login