javascript - 将 Nuxt 前端与 Flask 后端集成的最佳方法

Question

我正在尝试将使用 nuxt 构建的前端仪表板与使用 Flask 构建的 API 后端集成。前端和后端都必须在客户端封闭网络上的同一本地服务器上运行。客户端希望使用 Flask-Security 来对用户进行身份验证，但这就是问题的开始。最初，客户希望在 flask-security 模板文件夹中提供静态页面。

但是，因为页面本身需要来自 API 的数据才能加载（使用 nuxt 的 asyncData），所以我在尝试使用“npm run generate”/“npm run build”部署前端文件时遇到了问题，这是唯一的方法我可以通过在服务器端渲染中部署前端并在与运行 API 的端口不同的本地主机端口上本地运行（npm run start）来让前端与后端一起工作。到目前为止它一直在工作，但问题是现在客户希望使用 Flask-Security 添加登录到系统，但我正在尝试这样做......

所以，我有几个问题——

1 - 您认为解决此问题的理想方式是什么？可以吗？

2 - 您能否建议一种不同的方法/设置来整合正面和背面？在这种情况下，最佳做法是什么？应该使用 Flask 还是使用其他东西来完成登录？在前端还是在后端？

3 - 你会推荐一种不同的登录方法吗？（顺便说一句，到目前为止，前端还没有运行过 vue 商店，我认为这是通过 nuxt 进行身份验证所必需的......）

标签： javascriptflaskintegrationnuxt.jsflask-security

Answer 1

我使用 Vue（不是 SSR）并且正在积极维护一个烧瓶安全分支——主要是为了改进它以与现代单页应用程序一起使用。我有一篇关于将我的 fork 与单页应用程序一起使用的文章： https ://flask-security-too.readthedocs.io/en/latest/spa.html

但是要直接回答你的问题——我会将你的 nuxt/vue 前端与后端完全分开——它们可以而且应该单独开发和打包——即使它们都在同一个容器中运行。我的 dockerfile 下载我的 UI 存储库，运行 npm build 并将整个结果复制到 /var/www。我使用 nginx 来提供静态内容，并将 /api 路由到我的 flask/uwgi 后端。UI 仅通过 JSON API 进行通信 - 没有任何形式。因此，您将使用 Flask-Security 来管理用户（注册等）及其端点/视图授权保护 - 但不是 Flask-Securitys html 表单。

对于开发 - 没有 nginx - 需要一些技巧来确保在与前端不同的端口（本地）上运行的后端之间进行重定向和正确反弹。这个“技巧”是我 fork 中 Flask-Security 中的一个新配置变量，称为：SECURITY_REDIRECT_HOST，它将重定向 URL 重写到不同的端口。