将 Nuxt 前端与 Flask 后端集成的最佳方法答案

【问题标题】：Best method to integrate Nuxt frontend with Flask backend将 Nuxt 前端与 Flask 后端集成的最佳方法
【发布时间】：2019-12-10 11:53:38
【问题描述】：

我正在尝试将使用 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 进行身份验证所必需的......）

【问题讨论】：

标签： javascript flask integration nuxt.js flask-security

【解决方案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 重写到不同的端口。

【讨论】：

只是为了确保 - 我在 SSR 中使用 nuxt，所以我不确定我是否完全理解，你将如何使用 Flask-Security 进行登录，然后将用户转移到 nuxt前端？
大概您的 Vue 组件正在使用 axios 或其他一些包对您的烧瓶后端进行 API 调用。 Flask-Security 已经支持 JSON 请求/响应一段时间了。因此，您的 Vue 登录组件将使用正文 {"email": "xx", "password": "password"} 和 Content-Type = "application/json" 进行 POST /login。您将收到 200 响应（无重定向）。
太棒了。非常感谢！