在过去的两三年里，我一直在研究同时使用Vue和Laravel的项目。在每个项目开发的开始，我必须问自己，“我将如何将数据从Laravel传输到Vue？”。这适用于Vue前端组件与Blade模板紧密耦合的两个应用，以及完全独立于Laravel后端运行的单页应用。

有四种不同的方法将数据从一个地方传到另一个地方。

直接回显到数据对象或组件属性

赞成：简单明了，反对：必须和Blade模板中嵌入的Vue应用一起使用，可以说是将数据从Laravel应用移动到Vue前端最简单的方式。使用上述任何一种方法，您都可以将JSON编码的数据发送回您的应用程序或其组件。

然而，最大的缺点是可扩展性。您的JavaScript需要直接暴露在模板文件中，以便引擎可以呈现您的数据。如果你用Vue给Laravel网站的页面或者区域添加一些基本的交互，这应该不是问题，但是你会很容易遇到把数据强制压缩成压缩脚本的困难。

对Laravel 5.5使用json指令：

使用自定义组件和Laravel自己的json blade指令，您可以轻松地将数据移动到道具。这种方法允许您用Webpack或Mix划分Vue代码和捆绑脚本，同时仍然将数据直接注入其中。

将属性作为全局窗口注入

同意：在整个Vue应用程序和任何其他脚本中是全球可用的。反对：可能会引起混淆，通常不建议用于大型数据集。虽然这看起来有点老套，但是向窗口对象添加数据可以很容易地创建全局变量，这些变量可以从应用程序中使用的任何其他脚本或组件中访问。过去我把它作为一种存储和访问API基URL、公钥、特定模型ID等各种需要在整个前端使用的小数据项的方式。

但是，使用这种方法时需要注意的一点是访问Vue组件内部数据的方式。在模板内部，您将无法使用以下内容，因为Vue假设您试图访问的窗口对象位于同一组件中：

//行不通。template div v-if=' window . showsecrettwindow ' h1这是一个秘密窗口。不要告诉任何人！/h1 /div/template相反，您需要使用返回值的计算方法：

//会有用的。模板div v-if=' showsecrettwindow ' h1这是一个秘密窗口。不要告诉任何人！/h1 /div/templatescript导出默认值{ computed : { showsecrettwindow(){ return window . showsecrettwindow；}} }/script如果这个方法的用例是一个小字符串或数值，并且是由Laravel自己的mix编译的，那么事情实际上会变得非常简单。可以使用process.env对象引用。JavaScript中的env文件。例如，如果我的环境变量文件有API_DOMAIN=example.com，我可以在我的Vue组件(或其他用mix编译的JavaScript)中使用process.env.API_DOMAIN。

将API与Laravel自己的网络中间件和CSRF令牌结合使用

我同意：容易上手，非常适合单页应用。我不同意：要求前端由刀片模板呈现。对我来说，这个解决方案是在Vue前端Laravel后端的世界中最容易上手的方法。Laravel提供了两种不同的路由文件：web.php和api.php。它们通过应用程序提供商目录中的RouteServiceProvider.php文件进行提取和映射。默认情况下，web组的中间件设置为web，api组的中间件设置为api。

回到app/http/kernel . PHP；您会注意到，在第30行左右，两个组被映射到一个数组中，这个web组包含会话、cookie加密和CSRF令牌身份验证。同时，api组只有一个基本限制和一些绑定。如果您的目标是通过一个基本的轻量级api将信息拉入Vue，并且这个api不需要身份验证或post请求，那么您可以就此打住。否则，可以进行修改，以确保在几秒钟内与Vue完全兼容。

回到上面的RouteServiceProvider，web方法中的exchange api中间件。我们为什么要这么做？这有什么影响吗？它使我们通过api提取的路由也包含应用程序常规网络路由通常使用的所有会话标量和令牌。当使用axios或其他异步JavaScript http调用时，我们可以在后端使用Auth:user()或其他身份验证技术，但默认api无法做到这一点。

这个方法唯一的警告是你必须使用Laravel和一个刀片模板来渲染前端。这样，框架可以将必要的会话令牌和变量注入到请求中。

使用JWT身份验证的API调用

支持：最安全、解耦的选项，反对：需要安装配置第三方包JSON Web Tokens，这是一种安全易用的方法，可以锁定对API端点的访问，并使用Tymon的Sjwt-auth扩展包。在此基础上，构建新项目或在现有的Laravel应用程序中使用它们绝对是一件简单的事情。

要在API上安装和配置此功能，只有几个简单的步骤：

运行composer需要应用程序根目录中的tymon/jwt-auth。在撰写本文时，它正处于过渡期，因此您可能需要指定版本(例如，1.0.0-rc.5)。如果您使用的是Laravel5.4和更早版本，请将tymon jwtauth providers laravelserviceprovider :3360类添加到config/app.php中的providers数组。通过运行php artisan vendor:publish选择jwt-auth包发布配置文件。运行php artisan jwt:secret来生成签署应用程序令牌所需的密钥。之后，你需要决定哪些路线将受到JWT的保护，并通过JWT的认证。您可以使用内置的api auth中间件来执行这个操作，也可以在发送请求的过程中自己滚动来获取令牌。在API的登录方法中，您将使用与默认Laravel应用程序相同的auth()-尝试方法，除了您应该传递回来的JSON网络令牌。

从那里，您的Vue应用程序应该存储令牌(在LocalStorage或Vuex中)，并将其添加到Authorization头中，作为每个传出请求中的授权头。回到您的Laravel应用程序，您可以使用它们的令牌来引用特定用户的请求。返回应该显示给他们的数据。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。