使用 Laravel 和 VueJS 配置完全分离的前端和后端 Web 应用程序

Question

我正计划使用 Laravel 作为后端 REST API 和 Vue.js 前端来使用此 API 创建一个多页 Web 应用程序。

首先要明确的是，我对确切如何设置它的代码 sn-ps 不感兴趣，除非有些有助于可视化架构。

我想知道的是如何以完全分离的方式部署这个“拆分堆栈”。 IE。两个堆栈都不共享代码库，并且存储在完全独立的存储库中。

我对 jQuery 以外的 JavaScript 框架不是很熟悉，所以我认为我的理解不足主要在于 Vue.js 部门。一些特别突出的问题是：

一个 Vue.js 应用程序是否可以由 Web 服务器托管以提供静态 HTML 文件，如果可以，哪一个兼容？

前端和后端服务能否在同一台服务器上运行，例如在不同的端口上运行，对此有什么最佳做法？

以这种方式运行 Web 应用程序会如何影响登录身份验证，我是否应该考虑在前端和后端之间创建某种 OAuth 身份验证？

在阅读了许多博文之后，很明显这种架构是可行的，但我很难找到有关如何将其配置为完全独立的详细信息。

这里的工具和技术不一定重要，但 Vue.js 和 Laravel 的任何细节都值得赞赏。

Answer 1

我有一个 VueJS 前端和一个 ExpressJS 后端，这与您所说的非常相似。是的，这是完全可能的。因此，让我们分别看看您提出的每个问题。

Vue.js 应用程序是否可以由 Web 服务器托管以提供静态 HTML 文件，如果可以，哪个兼容？

是的，当您运行 VueJS 时，您可以将 build 作为静态应用程序或 serve 作为 NodeJS 应用程序。

请参阅 Vue CLI 3 文档 here 的部署部分。它解释了如何使用/dist 目录以您想要的方式为 VueJS 应用程序提供服务。

前端和后端服务是否可以在同一台服务器上运行，例如在不同的端口上，对此有什么最佳做法？

我最近发布了一个示例，说明如何在同一台服务器 here 上托管您的前端和 API。 （包括编码示例和说明）。这个答案引用 ExpressJS 作为 API，但原理是一样的。真的，只需让您的前端在端口 80 上侦听，并让您的 API 在另一个未使用的端口（即：8081）上运行。

以这种方式运行 Web 应用程序会如何影响登录身份验证，我是否应该考虑在前端和后端之间创建某种 OAuth 身份验证？

我在后端处理所有身份验证。基本上，在 Vue Router 中，你可以设置一个secure 参数。然后在最后声明一个router.beforeEach((to,from,next) => {}); 调用。然后，此调用应检查用户是否具有有效的登录令牌，并在使用要求用户登录的 URL 设置 cookie 后将其重定向到应用程序登录页面，以便在登录后将其发送回该页面。

在我们的例子中，我们将用户重定向到 VueJS 路由 /saml/login。 /saml/login 组件。该组件调用 API 并返回用户应该被重定向到登录的地址。在我们的例子中，它是 API（在同一台服务器上运行，但端口不同 [参见上面的答案]），www.example.com:8081/api/v1/saml_login。然后这与 IDP 一起工作并接收令牌和用户数据。这也是您执行 ACS 功能（配置用户、更新登录时间或用户数据等）的地方。收到令牌后，将其放入 cookie 或其他占位符中，以便可用于验证最初验证用户时存储在数据库中的令牌。 （最好在令牌上设置过期时间）。然后用户被重定向到存储在 cookie 中的 url，让我们知道他们被要求从哪里登录，这样他们就可以查看他们的内容，而无需再次查找。 （如果你愿意，很乐意分享这方面的代码）

Answer 2

我认为使用 Firebase 或 Auth0 身份验证是最好的方法之一。 Firebase 或 Auth0 将为您处理所有身份验证，并允许您的后端验证前端的真实性。因此，这使得将两者分开变得更加容易。

有一个用于将 Laravel 连接到 Firebase 的管理 SDK，并且有用于 Vue 的模板和现有的身份验证 SDK。有几篇文章对它进行了描述，但我还没有看到任何将它们拼凑在一起的东西。我能够从 2 或 3 篇不同的文章中找出答案，结果比我想象的要容易。