reactjs - onEnter 钩子(Hook)中的react-router自动登录

Question

在 onEnter 钩子(Hook)的所有 React-router 示例中，该钩子(Hook)都是同步的。在问题中，建议保持这种方式。在钩子(Hook)内登录某人的惯用方法是什么？

用户故事:

1. 客户端拥有 localStore token
2. 客户端直接导航至 example.com/mustBeLoggedIn
3. 在访问该页面之前，我想检查他们是否有 token ，如果有，请尝试获得授权。如果获得授权，继续沿路线行驶

我应该只使用 HOC 而不是 onEnter 吗？

我目前可以使用它，但我知道不建议这样做，而且看起来很脆弱，例如使用不可变存储会导致与此问题相同的问题:https://github.com/rackt/react-router/issues/2365

Answer 1

有很多方法可以解决这个挑战，但我同意 onEnter 中的调用应该同步的建议。以下是解决这一挑战的两种方法。

选项 1:不在页面加载时验证 token

可以说浏览器根本不应该验证现有 token 。也就是说，浏览器应该假设 token 有效并尝试加载定义的路由。

在服务器发出 API 调用失败响应时(真正发生实际身份验证和授权的情况)，您的应用程序可以以它选择的任何方式处理重新身份验证的需要:重定向到登录页面、显示登录对话框、等等

这种方法的优点是它可以在使用此逻辑的所有路由中工作，而无需单独指定需要它的路由。

选项 2:使用 HOC(推荐)

正如您所怀疑的，HOC 可能是最好的选择。您的路由器将尝试呈现如下内容:

<EnsureAuthorized checks={myCheckFunction} Component={MustBeLoggedIn} />

除了所需的身份验证检查(如用户角色)之外，这种灵活的 HOC 还可以选择运行自定义授权检查，并仅在身份验证和检查成功时才呈现提供的组件，然后以一致的方式处理失败(例如呈现登录组件或将用户重定向到登录页面或显示 403 类型的消息等)。