React前端和Node后端的安全性

Question

我对现代JavaScript Web开发世界相对较新。我已经构建了一个非常简单的Node / Express后端和一个单独的React前端。我的模糊计划是让用户有权访问前端的某些区域，然后让前端向后端发出请求。前端和后端可以共享相同的身份验证/授权方案吗？他们都可以使用像Auth0这样的东西吗？我怎样才能使这两个安全？

我有点陷入困境，并希望得到正确方向的任何建议或推动。我大部分都被卡住了，因为这是两个独立的应用程序，但同样的“用户”在技术上对某些React视图以及某些Express端点有权限 - 它们如何一起摇动？

感谢。

Answer 1

虽然看起来与您的主题没有直接关系，但如果您不打算立即开始处理大型项目（不要过于强调可伸缩性），我实际上会建议您尝试使用Meteor。

Meteor内置了对Accounts的支持，可以很好地与MongoDB交互，并且它还有自己的DDP协议，可以大规模简化API调用。它还可以很好地与React进行交互。

如果您认为Meteor可能不是您自己的好选择，您仍然可以从其授权等设计策略中学习。它有相当多的包源代码，不太难理解，应该对你要学习基本的想法。 （实际上，Meteor的Accounts包已经实现了另一个回答者提到的基本思想，你可以从它的设计原则中学习）

Answer 2

当用户登录您的网站时，请向他们发送一个访问令牌，让他们保持客户端。在前端，在呈现组件之前检查用户是否具有令牌和正确的权限。在后端，将令牌作为请求标头发送到端点。

Answer 3

我已经实现了类似的情况，但是在后端使用了弹簧启动kotlin。我的解决方案是使用JWT令牌来验证身份验证和授权。

1. 通过输入登录表单进行用户登录，并通过REST API将POST方法发送到后端.Backend验证凭据并返回包含加密user_role，到期日期等的JWT令牌...如果有效或403 exception

2. 前端解码JWT（使用jwt-decode lib或其他东西）， 保存它以验证对特定页面的访问权限 基于user_role的网站。例如：role =＆＃39; ADMIN＆＃39;可以访问管理信息中心页面，role =＆＃39; USER＆＃39;可以访问用户个人资料页面等

如果你使用express作为后端，我建议使用feathersjs。它有针对此的后端解决方案和可选的前端版本。请参阅：https://docs.feathersjs.com/api/authentication/jwt.html

Answer 4

使用Keycloak follow this保护前端（React.js）和后端（Node.js / Express Rest API）