如何等待 react-router onEnter 中的状态变化？

Question

我一直在尝试使用react-router 的onEnterhook 来检查身份验证。 基本上，我在 Redux 存储上调度了一个 saga 操作，以在 onEnter 钩子上启动 SSO 登录。

但是，即使我成功重定向以进行身份​​验证，这也会在组件安装后发生，因此会出现闪烁。 我尝试在调用 onEnter 钩子上的 callback 之前检查身份验证状态，但这也不起作用。

我将钩子应用为：

<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()
  }
}

在我的传奇中，我有：

const isAuthenticated = yield call(getAuthenticationToken) // returns a promise which resolves when the user has successfully authenticated on the SSO page
yield put(actions.checkAuthSuccess(isAuthenticated))

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

任何帮助将不胜感激。

Answer 1

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

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

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

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

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

在您的情况下，它看起来像是 下一个 参数。在身份验证检查解决后，您必须接受并调用它。