React 前端和 Node 后端的安全性

Question

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

我有点卡住了，如果有任何建议或正确方向的推动，我将不胜感激。 我主要被卡住了，因为这是两个独立的应用程序，但同一个“用户”在技术上有权访问某些 React 视图以及某些 Express 端点 - 它们如何组合在一起？

谢谢。

Answer 1

虽然看起来与您的主题没有直接关系，但实际上如果您不打算立即开始从事大型项目（不要对可扩展性施加太大压力），我建议您尝试使用 Meteor。

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

如果你觉得Meteor对你来说可能不是一个好的选择，你还是可以借鉴一下它的授权等设计策略。它有相当多的封装源代码，不是太难理解，应该对你的学习有帮助基本思想。 （其实Meteor的Accounts package已经实现了另一个回答者提到的基本思想，你可以借鉴它的设计原理）

Answer 2

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

Answer 3

我已经实现了一个类似的案例，但是在后端使用了 spring boot kotlin。 我的解决方案是使用 JWT 令牌来验证身份验证和授权。

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

2. 前端解码JWT（使用jwt-decode lib或其他），保存它以根据user_role验证对网站中特定页面的访问权限。 例如：role='ADMIN' 可以访问管理仪表板页面，role='USER' 可以访问用户个人资料页面等。

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

Answer 4

使用 Keycloak 保护前端（React.js）和后端（Node.js/Express Rest API） 遵循此