将 Nuxt 前端与 Flask 后端集成的最佳方法
Best method to integrate Nuxt frontend with Flask backend
我正在尝试将使用 nuxt 构建的前端仪表板与使用 Flask 构建的 API 后端集成。前端和后端都必须 运行 在客户端封闭网络上的同一本地服务器上。客户希望使用 Flask-Security 来验证用户身份，但这就是问题的开始。
最初，客户希望在 flask-security 模板文件夹中提供静态页面。
但是，因为页面本身需要来自 API 的数据才能加载（使用 nuxt 的 asyncData），所以我 运行 在尝试使用 [= 部署前端文件时遇到了问题22=]/"npm run build" 并且我可以让前端与后端一起工作的唯一方法是在服务器端渲染中部署前端并 运行 在本地安装它 (npm 运行 start) 在与 API 正在 运行ning 不同的本地主机端口上。
到目前为止它一直在工作，但问题是现在客户希望使用 Flask-Security 向系统添加登录，但我 运行 正在尝试这样做...
所以，我有几个问题 -
1 - 您认为解决此问题的理想方式是什么？可以做到吗？
2 - 你能建议一个不同的 method/setting 来整合前面和后面吗？在这种情况下，最佳做法是什么？登录应该使用 Flask 还是使用其他工具完成？在前端还是在后端？
3 - 您会推荐其他登录方法吗？ （请注意，到目前为止，前端尚未 运行 使用 vue 商店，我认为这是通过 nuxt 进行身份验证所必需的...）
我使用 Vue（不是 SSR）并且正在积极维护 flask-security 的一个分支——主要是为了改进它以用于现代单页应用程序。
我在这里写了一篇关于在单页应用程序中使用我的叉子的文章：
https://flask-security-too.readthedocs.io/en/latest/spa.html
但是直接回答你的问题 - 我会把你的 nuxt/vue 前端和你的后端完全分开 - 它们可以而且应该单独开发和打包 - 即使它们都 运行 在同一个容器。
我的 dockerfile 下载我的 UI 存储库，运行s npm build 并将整个结果复制到 /var/www。
我使用 nginx 来提供静态内容，并让它路由 /api 到我的 flask/uwgi 后端。
UI 仅通过 JSON API 进行通信——没有任何形式。因此，您将使用 Flask-Security 来管理用户（注册等）及其 endpoint/view 授权保护 - 但不是 Flask-Security html 表单。
对于开发 - 在没有 nginx 的情况下 - 需要一些技巧来确保重定向以及在 运行 在与前端不同的端口（本地）上的后端之间正确反弹。 'trick' 是我 fork 中 Flask-Security 中的一个新配置变量，名为：SECURITY_REDIRECT_HOST，它将重写重定向 URL 到不同的端口。
我正在尝试将使用 nuxt 构建的前端仪表板与使用 Flask 构建的 API 后端集成。前端和后端都必须 运行 在客户端封闭网络上的同一本地服务器上。客户希望使用 Flask-Security 来验证用户身份，但这就是问题的开始。 最初，客户希望在 flask-security 模板文件夹中提供静态页面。
但是，因为页面本身需要来自 API 的数据才能加载（使用 nuxt 的 asyncData），所以我 运行 在尝试使用 [= 部署前端文件时遇到了问题22=]/"npm run build" 并且我可以让前端与后端一起工作的唯一方法是在服务器端渲染中部署前端并 运行 在本地安装它 (npm 运行 start) 在与 API 正在 运行ning 不同的本地主机端口上。 到目前为止它一直在工作，但问题是现在客户希望使用 Flask-Security 向系统添加登录，但我 运行 正在尝试这样做...
所以，我有几个问题 -
1 - 您认为解决此问题的理想方式是什么？可以做到吗？
2 - 你能建议一个不同的 method/setting 来整合前面和后面吗？在这种情况下，最佳做法是什么？登录应该使用 Flask 还是使用其他工具完成？在前端还是在后端？
3 - 您会推荐其他登录方法吗？ （请注意，到目前为止，前端尚未 运行 使用 vue 商店，我认为这是通过 nuxt 进行身份验证所必需的...）
我使用 Vue（不是 SSR）并且正在积极维护 flask-security 的一个分支——主要是为了改进它以用于现代单页应用程序。 我在这里写了一篇关于在单页应用程序中使用我的叉子的文章： https://flask-security-too.readthedocs.io/en/latest/spa.html
但是直接回答你的问题 - 我会把你的 nuxt/vue 前端和你的后端完全分开 - 它们可以而且应该单独开发和打包 - 即使它们都 运行 在同一个容器。 我的 dockerfile 下载我的 UI 存储库，运行s npm build 并将整个结果复制到 /var/www。 我使用 nginx 来提供静态内容，并让它路由 /api 到我的 flask/uwgi 后端。 UI 仅通过 JSON API 进行通信——没有任何形式。因此，您将使用 Flask-Security 来管理用户（注册等）及其 endpoint/view 授权保护 - 但不是 Flask-Security html 表单。
对于开发 - 在没有 nginx 的情况下 - 需要一些技巧来确保重定向以及在 运行 在与前端不同的端口（本地）上的后端之间正确反弹。 'trick' 是我 fork 中 Flask-Security 中的一个新配置变量，名为：SECURITY_REDIRECT_HOST，它将重写重定向 URL 到不同的端口。