前端(SPA)和后端解耦:JWT 认证 + 持久登录

Posted

技术标签:

【中文标题】前端(SPA)和后端解耦:JWT 认证 + 持久登录【英文标题】:Decoupled frontend (SPA) and backend: JWT authentication + persistent login 【发布时间】:2019-11-21 16:06:22 【问题描述】:

在 localhost:3000 上,我正在托管一个 Node/Express 应用程序,它可以在 Mongo 中保存用户。在 localhost:8080 我正在尝试为其托管 AngularJS 前端 SPA。我已经实现了 JWT 身份验证来保护我的后端 API 端点,但我不想在 Authorization 标头中发送令牌,因为这不会为我提供持久登录。

通过谷歌搜索,我了解到存储 JWT 的最佳位置是 HttpOnly cookie。这对 Postman 来说很好,但 Chrome 不会在 localhost:8080 上设置 cookie,因为我认为不同的端口算作不同的域,因此 Chrome 不会做我想做的事情,因为这将是一个安全漏洞。

我在这里最好的做法是什么?我觉得很卡。有没有办法为解耦的前端和后端应用程序实现安全的 JWT 身份验证,并且仍然提供持久登录?即使我放弃 JWT,我仍然无法跨不同域设置 cookie,不是吗?

【问题讨论】:

【参考方案1】:

确保您的协议是https,具有HttpOnlySecure 属性的cookie 不会包含在普通的http 调用中。

【讨论】:

实际上我根本无法从服务器到客户端设置任何 cookie,即使没有安全和 HttpOnly 属性。【参考方案2】:

我的问题是由于对我应该如何构建这样的应用程序以及我的架构应该是什么存在根本性的误解。

我敢肯定,解决方案是常识,对许多人来说是显而易见的 :) 只是为后端 API 设置一个 Node 服务器,比如说在 localhost:3000 上,另一个 Node 服务器在选择的前端 javascript 框架(在本例中为 AngularJS)被注入以使其成为单页应用程序。第二台服务器被指示代理所有以/api 或类似于localhost:3000 的内容开头的请求。

【讨论】:

以上是关于前端(SPA)和后端解耦:JWT 认证 + 持久登录的主要内容,如果未能解决你的问题,请参考以下文章

分离前端和后端 - 使用 Vue/Webpack/Hapi 进行持久身份验证

使用 Django、webpack、reactjs、react-router 解耦前端和后端

前端用户认证和后端用户认证的区别

我将前端和后端应用程序上传到 Heroku,但无法使用 jwt()

如何在前端和后端存储 JWT 刷新令牌?

OpenID Connect JWT 令牌验证和后端 api 的使用策略 - jwks 还是会话?