PHP 将数据从 Laravel 传送到 vue 的四种方式

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

这里有四种不一样的方法从一个到另外一个获取数据。

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

​​​

• 同意: 简单明了
• 反对: 必须与嵌入到Blade模板中的Vue应用程序一块儿使用

能够说是将数据从 Laravel 应用程序移动到 Vue 前端的最简单方法。使用上面的任何一种方法，您均可以将 JSON 编码的数据回送给您的应用程序或其组件。

然而，最大的缺点是可扩展性。您的 JavaScript 须要直接暴露在模板文件中，以便引擎能够呈现您的数据。若是您使用 Vue 向 Laravel 站点的页面或区域添加一些基本的交互，这应该不是问题，可是您很容易就会遇到将数据强制放入压缩脚本的困难。

​​​

对于 Laravel 5.5+ 使用 json 指令：

使用自定义组件和 Laravel 自身的 json blade指令可让您轻松地将数据移动到道具中。此方法容许您划分 Vue 代码，将脚本与 Webpack 或 Mix 捆绑在一块儿，同时仍能够直接向其中注入数据。

将属性做为全局窗口注入

​​​

• 同意: 在整个Vue应用程序和任何其余脚本中全局可用
• 反对: 可能很混乱，一般不建议用于大型数据集

虽然这看起来有点老生常谈，但将数据添加到窗口对象中能够轻松地建立全局变量，这些变量能够从应用程序中使用的任何其余脚本或组件访问。在过去，我用它做为存储和访问 API 基 URL、公钥、特定模型 ID 和各类其余须要在整个前端使用的小数据项的方法。

不过，使用此方法有一点须要注意，这就是访问 Vue 组件内部数据的方式。在模板内部，您将没法使用如下内容，由于 Vue 假定您尝试访问的窗口对象位于同一组件内：

1 // 不会起做用
2 <template>
3     <div v-if="window.showSecretWindow">
4         <h1>这是个秘密窗口，别告诉任何人！</h1>
5     </div>
6 </template>

相反，您须要使用返回值的计算方法：

// 会起做用
<template>
    <div v-if="showSecretWindow">
        <h1>这是个秘密窗口，别告诉任何人！</h1>
    </div>
</template>
<script>
    export default {
        computed: {
            showSecretWindow() {
                return window.showSecretWindow;
            }
        }
    }
</script>

若是这个方法的用例是较小的字符串或数值，而且使用 Laravel自身的 mix 来编译，那么事情实际上会变得很是简单。您可使用 process.env 对象引用 JavaScript 中 .env 文件中的值。例如，若是个人环境变量文件中有 API_DOMAIN=example.com，我能够在个人 Vue 组件（或使用 mix 编译的其余 JavaScript ）中使用process.env.API_DOMAIN。

将 API 与 Laravel 自身的 web 中间件和 CSRF 令牌一块儿使用

​​​

• 同意: 易于启动，很是适合单页应用程序
• 反对: 要求前端由 Blade 模板呈现

对我来讲，这个解决方案是 Vue 前端 + Laravel 后端世界中最简单的入门方法。 Laravel 提供了两个不一样的路由文件：web.php 和 api.php。它们被拉入并经过应用程序Providers目录中的 RouteServiceProvider.php 文件映射。默认状况下，web 组的中间件设置为 web，api 组的中间件设置为api。

追溯到 app/Http/Kernel.php；您会注意到，在第30行左右，有两个组被映射到一个数组中，这个 web 组包含会话、 cookie 加密和 CSRF 令牌验证等内容。同时，api 组只有一个基本的限制和一些绑定。若是您的目标只是经过一个基本的、轻量级的 api 将信息拉入 Vue ，而这个 api 不须要身份验证或 post 请求，那么您能够到此为止。不然，能够进行一次修改，以确保在几秒钟内与 Vue 彻底兼容。

回到上面的 RouteServiceProvider, 交换出 web 方法中的 api 中间件。咱们为何要这样作？这样作有什么做用吗？它使咱们经过 api 拉入的路由也能够包含应用程序的常规网络路由一般会使用到的全部会话标量和令牌。当使用 axios 或者其余异步 JavaScript http 调用的时候，咱们能够在后端使 Auth::user() 或者其余的验证技术，而默认的 api 就没法作到这些。

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

使用 JWT 认证的 API 调用

​​​

• 同意: 最安全和解耦的选项
• 反对: 须要安装以及配置第三方程序包

JSON Web Tokens 是安全的，易于使用的方法来锁定对API 端点的访问，并使用了 Tymon’s jwt-auth 扩展包，在这个基础上，用来构建新的项目或者在现有的 Laravel 应用中使用绝对是一件简单的事情。

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

1. 在你的应用根目录运行 composer require tymon/jwt-auth。在写这篇文章的时候正处于过渡时期，所以你可能须要指定版本(例如 1.0.0-rc.5)。
2. 若是你使用的是 Laravel5.4 及更低的版本，将该行 Tymon\JWTAuth\Providers\LaravelServiceProvider::class, 加入 config/app.php 的 providers 数组当中。
3. 经过运行 php artisan vendor:publish 来选择 jwt-auth 软件包发布配置文件。
4. 运行 php artisan jwt:secret 以生成签名应用程序令牌所须要的密钥。

完成以后，你须要决定哪些路由将受 JWT 保护并针对 JWT 进行身份验证。你可使用内置的 api auth 中间件来执行此操做,或者也能够本身滚动在发送请求的过程当中获取令牌。在 API 的登陆方法中，你将使用相同的 auth()->attempt 方法做为默认的Laravel应用程序，但从它返回的除外是你应该传递回的 JSON Web Token 令牌。

从那里，你的 Vue 应用程序应该存储该令牌(存储在 LocalStorage 或者 Vuex)，在每个传出请求中，都将它加入到 Authorization header 做为受权头。回到你的 Laravel 应用，你可使用他们的令牌来引用特定用户的请求。将应该显示给他们的数据返回回去。

 

大型laravel项目实战直播加入（点击→）个人直播群677079770