將Nuxt前端與Flask后端集成的最佳方法

Question

我正在嘗試將使用nuxt構建的前端儀表板與使用Flask構建的API后端集成在一起。 前端和后端都必須在客戶端的封閉網絡上的同一本地服務器上運行。 客戶端希望使用Flask-Security來對用戶進行身份驗證，但這是問題開始的地方。 最初，客戶端希望在flask-security templates文件夾中提供靜態頁面。

但是，由於頁面本身需要來自API的數據才能加載（使用nuxt的asyncData），因此在嘗試使用“ npm run generate” /“ npm run build”和唯一方法部署前端文件時遇到了問題我可以通過將前端部署在服務器端渲染中並在與API運行的本地主機端口不同的本地主機本地本地運行（npm run start）來使前端與后端一起工作。 到目前為止，它一直在工作，但是問題是現在客戶端希望使用Flask-Security向系統添加登錄名，但是我遇到了嘗試這樣做的磚牆...

所以，我有幾個問題-

1-您認為這將是解決此問題的理想方法嗎？ 能做到嗎

2-您能否建議采用其他方法/設置來整合正面和背面？ 在這種情況下，最佳做法是什么？ 應該使用Flask還是其他方式完成登錄？ 在前端還是后端？

3-您會推薦其他登錄方法嗎？ （請注意，到目前為止，前端尚未與vue商店一起運行，我認為這是通過nuxt進行身份驗證所必需的...）

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的情況下-需要一些技巧來確保重定向以及在與前端不同的端口（本地）上運行的后端之間的正確反彈。 這個“竅門”是Flask-Security中我分支中的一個新配置變量，名為：SECURITY_REDIRECT_HOST，它將把重定向URL重寫到另一個端口。