Next.js+Redux 认证和重定向
Next.js+Redux authentication and redirect
我开始构建一个 next.js 应用程序并且我正在使用 redux。
我在 next.js 中阅读了很多关于身份验证的内容，特别是 redux。
假设我有一个 /login 页面和一个 /private 页面。
我的 redux 商店包含 isAuthenticated 状态。
所以，在我看来，我需要考虑以下场景：
当通过地址栏 (SSR) 导航到 /private 时，我应该重定向到 /login。
当已经在 /private 中并且 isAuthenticated 更改为 false。
/login登录成功后，更新isAuthenticated状态，重定向到/private页面。
我是否错过了一些重要的可能场景（用户体验和安全方面）？
关于这些案例，我有几个问题请教专家：
对于场景 1，我在 getinitialprops 中实施了身份验证检查（仅当 ctx.req 不为空时）。如果用户未通过身份验证，我会用 302 响应将他重定向到 /login 页面。可以吗？
关于场景2，我应该在哪里实现这个逻辑？最佳做法是什么？我可以想到在 getinitialprops、render() 函数、componentDidUpdate 中实现检查...
我应该在调用 redux 操作（验证）之后重定向，还是在 redux 操作中重定向？
我应该从 redux 动作中触发登录请求还是在组件的句柄函数中触发登录请求，并在成功时调用 redux 动作。
重定向时，我应该使用Router.push还是Router.replace？
请帮助我一劳永逸地了解最佳实践。
这是根据经验得出的：
- 对于场景 1，我在 getinitialprops 中实施了身份验证检查（仅当 ctx.req 不为空时）。如果用户未通过身份验证，我会用 302 响应将他重定向到 /login 页面。可以吗？
是的，这没关系。它会做它需要做的事情。
- 关于场景2，我应该在哪里实现这个逻辑？最佳做法是什么？我可以想到在 getinitialprops、render() 函数、componentDidUpdate 中实现检查...
肯定是getInitialProps。我们所做的是制作了一个可以被 SSR 和 CSR 组件使用的助手。助手所做的是访问两个实例的 Cookie，这样，身份验证状态是一致的。可能有更好的方法，但这就是我们实现它的方式。
- 我应该在调用 redux 操作（验证）之后重定向，还是在 redux 操作中重定向？
取决于您团队的协议。对我们来说，重定向等所有副作用都可以在 Redux Sagas 中完成。
- 我应该从 redux 动作中触发登录请求还是在组件的 handle 函数中触发登录请求，并在成功时调用 redux 动作。
我建议使用 Sagas，因为它更干净，并为您提供另一层以保留所有副作用。但在您的情况下，我建议保持动作干净，只做它需要做的：改变状态。
- 重定向时，我应该使用 Router.push 还是 Router.replace？
我建议 Router.push。使用 replace 会覆盖路由堆栈的顶部，这可能会在回击或不回击时导致不良影响。这将取决于您的要求是否会担心您回击时会发生什么。
不要把事情复杂化。让它发挥作用，并在实际发挥作用后找到更好的方法。
我开始构建一个 next.js 应用程序并且我正在使用 redux。 我在 next.js 中阅读了很多关于身份验证的内容，特别是 redux。 假设我有一个 /login 页面和一个 /private 页面。 我的 redux 商店包含 isAuthenticated 状态。 所以，在我看来，我需要考虑以下场景：
当通过地址栏 (SSR) 导航到 /private 时，我应该重定向到 /login。
当已经在 /private 中并且 isAuthenticated 更改为 false。
/login登录成功后，更新isAuthenticated状态，重定向到/private页面。
我是否错过了一些重要的可能场景（用户体验和安全方面）？
关于这些案例，我有几个问题请教专家：
对于场景 1，我在 getinitialprops 中实施了身份验证检查（仅当 ctx.req 不为空时）。如果用户未通过身份验证，我会用 302 响应将他重定向到 /login 页面。可以吗？
关于场景2，我应该在哪里实现这个逻辑？最佳做法是什么？我可以想到在 getinitialprops、render() 函数、componentDidUpdate 中实现检查...
我应该在调用 redux 操作（验证）之后重定向，还是在 redux 操作中重定向？
我应该从 redux 动作中触发登录请求还是在组件的句柄函数中触发登录请求，并在成功时调用 redux 动作。
重定向时，我应该使用Router.push还是Router.replace？
请帮助我一劳永逸地了解最佳实践。
这是根据经验得出的：
- 对于场景 1，我在 getinitialprops 中实施了身份验证检查（仅当 ctx.req 不为空时）。如果用户未通过身份验证，我会用 302 响应将他重定向到 /login 页面。可以吗？
是的，这没关系。它会做它需要做的事情。
- 关于场景2，我应该在哪里实现这个逻辑？最佳做法是什么？我可以想到在 getinitialprops、render() 函数、componentDidUpdate 中实现检查...
肯定是getInitialProps。我们所做的是制作了一个可以被 SSR 和 CSR 组件使用的助手。助手所做的是访问两个实例的 Cookie，这样，身份验证状态是一致的。可能有更好的方法，但这就是我们实现它的方式。
- 我应该在调用 redux 操作（验证）之后重定向，还是在 redux 操作中重定向？
取决于您团队的协议。对我们来说，重定向等所有副作用都可以在 Redux Sagas 中完成。
- 我应该从 redux 动作中触发登录请求还是在组件的 handle 函数中触发登录请求，并在成功时调用 redux 动作。
我建议使用 Sagas，因为它更干净，并为您提供另一层以保留所有副作用。但在您的情况下，我建议保持动作干净，只做它需要做的：改变状态。
- 重定向时，我应该使用 Router.push 还是 Router.replace？
我建议 Router.push。使用 replace 会覆盖路由堆栈的顶部，这可能会在回击或不回击时导致不良影响。这将取决于您的要求是否会担心您回击时会发生什么。
不要把事情复杂化。让它发挥作用，并在实际发挥作用后找到更好的方法。