详解将数据从Laravel传送到vue的四种方式(2)

// 会起作用
<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 调用

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