Question

我一直在尝试使用react-router的{{1}}挂钩来检查身份验证。基本上，我在Redux商店发送一个saga动作，以便在onEnter钩子上启动SSO登录。

但是，即使我成功重定向进行身份验证，这种情况也会在组件安装完成后发生，因此会出现闪烁现象。我在onEnter挂钩上调用callback之前尝试检查身份验证状态，但这也无效。

我将钩子应用为：

onEnter

然后我实现它：

<Route path='home' component={HomePage} onEnter={checkAuthentication(store)} />

在我的传奇中，我有：

const checkAuthentication = (store) => {
  return (nextState, replace, next) => {
    if (!store.getState().authentication.isAuthenticated)
       store.dispatch(checkAuth())
    return next()
  }
}

除非saga返回身份验证状态，否则如何确保没有组件挂载？

任何帮助都将不胜感激。

Answer 1

问题是saga是异步的。身份验证检查将委派给事件循环，然后在受保护的组件安装/更新后执行。我发现处理这种情况的最好方法是创建一个路由和组件，作为受保护路由的网守。

基本上不是最初路由到受保护的组件，而是先将它们发送到带有加载模式（或空白或其他）的组件。从那里，当验证逻辑完成时，它们将被路由到受保护的路由或者被引导回它们来自的地方。

如果您的用户需要进行大量路由，这不是一个可行的解决方案，最好在第一次身份验证检查后找到方法使该检查同步。这样你就可以使用onEnter而不首先渲染组件。

一种解决方案是使用回调作为onEnter方法的第3个参数。

Here is a good thread that discusses how to use that functionality

在您的情况下，它似乎是 next 参数。在验证身份验证检查完成后，您必须接受并调用它。

如何等待react-router onEnter中的状态更改？

1 个答案: