Laravel 向 Vue 传递数据的四种方法

过去两三年来，我一直在开发同时使用 Vue 和 Laravel 的项目。在每个项目的开发初期，我都会问自己：“如何将数据从 Laravel 传递到 Vue？” 这个问题既适用于 Vue 前端组件与 Blade 模板紧密耦合的应用程序，也适用于完全独立于 Laravel 后端运行的单页应用程序。

这里有四种不同的方法可以将数据从一个传输到另一个。

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

• 优点：简单直接
• 缺点：必须与嵌入 Blade 模板的 Vue 应用程序一起使用

可以说，这是将数据从 Laravel 应用程序迁移到 Vue 前端最简单的方法。使用上述任一方法，您都可以直接输出 JSON 编码的数据，供您的应用程序或其组件获取。

然而，这样做最大的缺点是可扩展性。你的 JavaScript 需要直接在模板文件中暴露，以便引擎能够渲染你的数据。如果你使用 Vue 为 Laravel 网站的页面或区域添加一些基本的交互功能，这应该不成问题，但如果试图将数据强制放入打包的脚本中，你很容易遇到麻烦。

使用自定义组件和 Laravel 的jsonblade 指令确实可以让你轻松地将数据移动到 props 中。这种方法可以让你划分 Vue 代码，使用 webpack 或 mix 打包脚本，同时仍然能够直接将数据注入其中。

将项目注入为全局窗口属性

• 优点：可在整个 Vue 应用程序和任何其他脚本中全局使用
• 缺点：可能会很混乱，通常不建议用于大型数据集

虽然这看起来有点 hacky，但向 window 对象添加数据可以轻松创建全局变量，这些变量可以被应用中使用的任何其他脚本或组件访问。过去，我曾用这种方法快速轻松地存储和访问 API 基础 URL、公钥、特定模型 ID 以及我需要在整个前端使用的各种其他小数据项。

不过，使用此方法需要注意一点，那就是访问 Vue 组件内部数据的方式。在模板内部，您将无法使用类似下面的方法，因为 Vue 假定您尝试访问的窗口对象位于同一组件内部：

// won't work
<template>
    <div v-if="window.showSecretWindow">
        <h1>This is a secret window, don't tell anyone!</h1>
    </div>
</template>

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

// will work
<template>
    <div v-if="showSecretWindow">
        <h1>This is a secret window, don't tell anyone!</h1>
    </div>
</template>
<script>
    export default {
        computed: {
            showSecretWindow() {
                return window.showSecretWindow;
            }
        }
    }
</script>

如果您使用此方法的用例是较小的字符串或数值，并且您正在使用 Laravel 的 mix 来编译资源，那么事情实际上会变得非常简单。您可以.env使用 process.env 对象在 JavaScript 中引用文件中的值。例如，如果我API_DOMAIN=example.com的环境变量文件中有值，那么我可以process.env.API_DOMAIN在我的 Vue 组件（或其他使用 mix 编译的 JavaScript）中使用它来访问该值。

使用 Laravel 的 Web 中间件和 CSRF 令牌的 API

• 优点：易于上手，非常适合单页应用程序
• 缺点：需要使用 blade 模板来渲染前端

对我来说，这个解决方案是开启 Vue 前端 + Laravel 后端之旅最直接的方式。Laravel 开箱即用，自带两个不同的路由文件，web.php分别为 和api.php。它们会被拉入RouteServiceProvider.php应用Providers目录中的文件并进行映射。默认情况下，web 组的中间件设置为 web，api 组的中间件设置为 api。

追溯到代码，app/Http/Kernel.php你会注意到大约在第 30 行，两个组被映射到一个数组中，其中 web 组包含会话、cookie 加密和 CSRF 令牌验证等内容。而 api 组只包含一个基本的限制和一些绑定。如果你的目标只是通过一个基本的轻量级 API 将信息拉取到 Vue，并且不需要身份验证或 POST 请求，那么你可以就此打住。否则，只需进行一次修改，即可在几秒钟内确保与 Vue 完全兼容。

回到，将方法中的apiRouteServiceProvider中间件替换为web。我们为什么要这样做？它的作用是什么？它使我们通过 api 拉取的路由也包含应用程序常规 web 路由通常会使用的任何会话变量和令牌。当使用 axios 或其他异步 JavaScript http 客户端调用这些路由时，我们就能够在后端使用 Auth::user() 和其他验证技术，而这些是默认 api 无法做到的。mapApiRoutes

此方法唯一需要注意的是，你必须使用 Laravel 和 blade 模板渲染前端。这样，框架才能将必要的会话令牌和变量注入到请求中。

使用 JWT 验证的 API 调用

• 优点：最安全和解耦的选项
• 缺点：需要安装和配置第三方包

J SON W eb T令牌是一种安全、易于使用的方法，可以锁定对 API 端点的访问，并且使用 Tymon 的jwt-auth包可以毫不费力地将该功能添加到新的或现有的 Laravel 应用程序中。

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

1. 从应用程序根目录运行composer require tymon/jwt-auth。本文撰写时正处于过渡期，因此您可能需要指定版本（例如 1.0.0-rc.5）。

2. 如果您使用的是 Laravel 5.4 及以下版本，请将Tymon\JWTAuth\Providers\LaravelServiceProvider::class, 行添加到 config/app.php 中的提供程序数组中

3. php artisan vendor:publish通过运行并选择 jwt-auth 包来发布配置文件

4. 运行php artisan jwt:secret以生成签署应用令牌所需的密钥

完成后，您需要指定应用程序中哪些路由将受 JWT 保护并进行身份验证。您可以使用内置的 api auth 中间件来实现，也可以自行编写一个在发送的请求中查找令牌的中间件。在 API 的 login 方法中，您将使用auth()->attempt与默认 Laravel 应用相同的方法，不同之处在于该方法返回的是您应该传回的 JSON Web Token。

从这里开始，你的 Vue 应用应该存储该令牌（在 LocalStorage 或 Vuex 存储中），并将其作为授权标头添加到每个需要它的传出请求中。回到你的 Laravel 应用，你可以使用他们的令牌来引用发出请求的特定用户，并传回仅向他们显示的数据。

如果您想要更深入的教程来解释如何安装并将 JWT 集成到您的 Laravel API 中，我已经发布了一个视频并写了一篇关于此的文章！

暂时就这些！如果您对以上内容有任何疑问或意见，或者只是想了解一些有用的提示和行业新闻，欢迎在Twitter上关注我！此外，如果您正在寻找一款专为 Laravel 应用设计的超级简单的错误和日志监控服务，我已经开发了Larahawk。它目前处于内测阶段，并将于 10 月正式上线，每个应用每月 5 美元。