ReactJS 路由 -> ProtectedRoute - 最佳实践？

Posted 2023-03-10

【中文标题】ReactJS 路由 -> ProtectedRoute - 最佳实践？

【英文标题】：ReactJS Routing -> ProtectedRoute - best practice?

【发布时间】：2021-11-19 16:03:20

【问题描述】：

我已经编写了一个 ProtectedRoute，它在登录后将用户登录的 ReactContext 存储在其中。但是由于我将这些信息存储在本地，这不是一个不好的做法吗？

我是否应该更好地使用我的实际令牌向我的后端发送请求，然后将用户路由到其目的地如果令牌有效？

或者将任何布尔值本地存储在 Context 或 ReduxStore 中是否有效？

如果有效，为什么？既然可以被操纵，那不是很危险吗？

【问题讨论】：

这取决于用户是否可以真正访问任何应该被保护的东西。例如，如果对将显示在其上的秘密数据的 API 请求失败，那么仅仅能够访问该页面并不重要。

这么说吧，我有 3 个页面 -> 欢迎、登录、注销，用户无需通过身份验证即可访问，但可以说用户必须访问的页面很少认证了，然后呢？

那么在客户端代码中有什么他们不应该看到的吗？ React 无论如何也不能保护你，因为他们下载了整个代码库才能运行应用程序。 实际上需要保护的所有东西都应该只通过 API 公开，它们需要经过正确的身份验证，因此摆弄 Redux 存储对他们没有帮助。

好点，不，客户端上没有他们不应该看到的东西，所有信息都来自后端，无论哪种方式，我希望用户只在他访问某些页面时访问登录，我的问题是，如何去做，存储任何“用户已登录”或发送返回用户状态的 api 请求

【参考方案1】：

我们有不同的选项将令牌存储在客户端，我们可以使用本地存储功能手动设置令牌，另一个选项是redux-persist，根据我的观点，redux-persist 存储身份验证令牌的最佳选项是您正在项目中使用 redux。 你提到的第二件事是安全性，我们可以在后端管理令牌安全假设如果有人偷了你的令牌并在更改令牌后更改令牌用户向服务器发送请求，服务器将被发回未经授权的消息，

【讨论】：

不，您不想将令牌存储在您的 JS 中，这就是我使用 httpOnly 令牌的原因，这就是为什么我的问题是，如果我应该在 Redux 或 Context 中保存任何其他值作为“用户已通过身份验证”或在 ea 上向后端发送请求。 ProtectedRoute 视图

是的，我们还有另一个选项可以为下一次 API 调用生成新令牌，请查看此链接 developer.okta.com/blog/2019/02/14/…

我们有不同的选项来保护 API，但每个选项都取决于您的要求和项目