如何等待反应路由器onEnter中的状态更改?

Question

我一直在尝试使用react-router的onEnter钩子来检查身份验证。 基本上，我在 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

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

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

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

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

这是一个很好的线程，讨论了如何使用该功能

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