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

标签 javascript flask integration nuxt.js flask-security

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

但是,由于页面本身需要来自 API 的数据才能加载(使用 nuxt 的 asyncData),因此在尝试使用“npm rungenerate”/“npmrunbuild”部署前端文件时遇到了问题,并且我能让前端与后端协同工作的唯一方法是在服务器端渲染中部署前端,并在与 API 运行的端口不同的本地主机端口上本地运行它(npm run start)。 到目前为止它一直在工作,但问题是现在客户希望使用 Flask-Security 添加登录到系统,但我在尝试这样做时遇到了困难......

所以,我有几个问题 -

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

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

3 - 您会推荐不同的登录方法吗? (请注意,到目前为止,前端尚未使用 vue 商店运行,我认为这是通过 nuxt 进行身份验证所必需的......)

最佳答案

我使用 Vue(不是 SSR),并积极维护 Flask-security 的分支 - 主要是为了改进它以与现代单页应用程序一起使用。 我在这里写了一篇关于在单页应用程序中使用我的 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 来管理用户(注册等)及其端点/ View 授权保护 - 但不是 Flask-Securitys html 表单。

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

关于javascript - 将 Nuxt 前端与 Flask 后端集成的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57316551/

相关文章:

javascript - React Hooks useState() 与对象

javascript - 用javascript动态修改webkit动画

python - 错误 : tensorboard 2. 0.2 要求 setuptools>=41.0.0,但您将拥有不兼容的 setuptools 40.6.2

python - 请求无法在同一个 Flask 应用程序中调用多个路由

javascript - 当请求索引(根路径)时,Flask 应用程序重定向到空的 "about:srcdoc"页面

javascript - CSS3 动画 Buggy/Blinky

javascript - 非常非常简单的qtip实现

arrays - Matlab - 两条线的距离

sqlite - 带SQLite的ExpressionEngine(CMS)

mysql - 在 Linux Web 服务器上公开 Access 数据库