在過去的兩三年里，我一直在研究同時(shí)使用 Vue 和 Laravel 的項(xiàng)目，在每個(gè)項(xiàng)目開發(fā)的開始階段，我必須問自己 “我將如何將數(shù)據(jù)從 Laravel 傳遞到 Vue ？”。這適用于 Vue 前端組件與 Blade 模板緊密耦合的兩個(gè)應(yīng)用程序，以及運(yùn)行完全獨(dú)立于 Laravel 后端的單頁應(yīng)用程序。

這里有四種不同的方法從一個(gè)到另一個(gè)獲取數(shù)據(jù)。

直接回顯到數(shù)據(jù)對(duì)象或組件屬性中

• 贊成: 簡單明了
• 反對(duì): 必須與嵌入到 Blade 模板中的 Vue 應(yīng)用程序一起使用

可以說是將數(shù)據(jù)從 Laravel 應(yīng)用程序移動(dòng)到 Vue 前端的最簡單方法。使用上面的任何一種方法，您都可以將 JSON 編碼的數(shù)據(jù)回送給您的應(yīng)用程序或其組件。

然而，最大的缺點(diǎn)是可擴(kuò)展性。您的 JavaScript 需要直接暴露在模板文件中，以便引擎可以呈現(xiàn)您的數(shù)據(jù)。如果您使用 Vue 向 Laravel 站點(diǎn)的頁面或區(qū)域添加一些基本的交互，這應(yīng)該不是問題，但是您很容易就會(huì)遇到將數(shù)據(jù)強(qiáng)制放入壓縮腳本的困難。

對(duì)于 Laravel 5.5+ 使用 json 指令：

使用自定義組件和 Laravel 自身的 json blade 指令可以讓您輕松地將數(shù)據(jù)移動(dòng)到道具中。此方法允許您劃分 Vue 代碼，將腳本與 Webpack 或 Mix 捆綁在一起，同時(shí)仍可以直接向其中注入數(shù)據(jù)。

將屬性作為全局窗口注入

• 贊成: 在整個(gè) Vue 應(yīng)用程序和任何其他腳本中全局可用
• 反對(duì): 可能很混亂，通常不建議用于大型數(shù)據(jù)集

雖然這看起來有點(diǎn)老生常談，但將數(shù)據(jù)添加到窗口對(duì)象中可以輕松地創(chuàng)建全局變量，這些變量可以從應(yīng)用程序中使用的任何其他腳本或組件訪問。在過去，我用它作為存儲(chǔ)和訪問 API 基 URL、公鑰、特定模型 ID 和各種其他需要在整個(gè)前端使用的小數(shù)據(jù)項(xiàng)的方法。

不過，使用此方法有一點(diǎn)需要注意，這就是訪問 Vue 組件內(nèi)部數(shù)據(jù)的方式。在模板內(nèi)部，您將無法使用以下內(nèi)容，因?yàn)?Vue 假定您嘗試訪問的窗口對(duì)象位于同一組件內(nèi)：

// 不會(huì)起作用
<template>
  <div v-if="window.showSecretWindow">
    <h1>這是個(gè)秘密窗口，別告訴任何人！</h1>
  </div>
</template>

相反，您需要使用返回值的計(jì)算方法：

// 會(huì)起作用
<template>
  <div v-if="showSecretWindow">
    <h1>這是個(gè)秘密窗口，別告訴任何人！</h1>
  </div>
</template>
<script>
  export default {
    computed: {
      showSecretWindow() {
        return window.showSecretWindow;
      }
    }
  }
</script>

如果這個(gè)方法的用例是較小的字符串或數(shù)值，并且使用 Laravel 自身的 mix 來編譯，那么事情實(shí)際上會(huì)變得非常簡單。您可以使用 process.env 對(duì)象引用 JavaScript 中 .env 文件中的值。例如，如果我的環(huán)境變量文件中有 API_DOMAIN=example.com，我可以在我的 Vue 組件（或使用 mix 編譯的其他 JavaScript ）中使用 process.env.API_DOMAIN。

將 API 與 Laravel 自身的 web 中間件和 CSRF 令牌一起使用

• 贊成: 易于啟動(dòng)，非常適合單頁應(yīng)用程序
• 反對(duì): 要求前端由 Blade 模板呈現(xiàn)

對(duì)我來說，這個(gè)解決方案是 Vue 前端 + Laravel 后端世界中最簡單的入門方法。 Laravel 提供了兩個(gè)不同的路由文件：web.php 和 api.php。它們被拉入并通過應(yīng)用程序 Providers 目錄中的 RouteServiceProvider.php 文件映射。默認(rèn)情況下，web 組的中間件設(shè)置為 web，api 組的中間件設(shè)置為 api。

追溯到 app/Http/Kernel.php；您會(huì)注意到，在第 30 行左右，有兩個(gè)組被映射到一個(gè)數(shù)組中，這個(gè) web 組包含會(huì)話、 cookie 加密和 CSRF 令牌驗(yàn)證等內(nèi)容。同時(shí)，api 組只有一個(gè)基本的限制和一些綁定。如果您的目標(biāo)只是通過一個(gè)基本的、輕量級(jí)的 api 將信息拉入 Vue ，而這個(gè) api 不需要身份驗(yàn)證或 post 請(qǐng)求，那么您可以到此為止。否則，可以進(jìn)行一次修改，以確保在幾秒鐘內(nèi)與 Vue 完全兼容。

回到上面的  RouteServiceProvider, 交換出 web 方法中的 api 中間件。我們?yōu)槭裁匆@樣做？這樣做有什么作用嗎？它使我們通過 api 拉入的路由也可以包含應(yīng)用程序的常規(guī)網(wǎng)絡(luò)路由通常會(huì)使用到的所有會(huì)話標(biāo)量和令牌。當(dāng)使用 axios 或者其他異步 JavaScript http 調(diào)用的時(shí)候，我們可以在后端使 Auth::user () 或者其他的驗(yàn)證技術(shù)，而默認(rèn)的 api 就無法做到這些。

這個(gè)方法唯一警告的是，你必須使用 Laravel 和 一個(gè) blade 模板來渲染前端。這樣框架可以將必要的會(huì)話令牌和變量注入到請(qǐng)求當(dāng)中。

使用 JWT 認(rèn)證的 API 調(diào)用

• 贊成: 最安全和解耦的選項(xiàng)
• 反對(duì): 需要安裝以及配置第三方程序包

JSON Web Tokens 是安全的，易于使用的方法來鎖定對(duì) API 端點(diǎn)的訪問，并使用了 Tymon'sjwt-auth 擴(kuò)展包，在這個(gè)基礎(chǔ)上，用來構(gòu)建新的項(xiàng)目或者在現(xiàn)有的 Laravel 應(yīng)用中使用絕對(duì)是一件簡單的事情。

要在 API 上安裝和配置此功能，只需要幾個(gè)簡單的步驟：

1. 在你的應(yīng)用根目錄運(yùn)行  composer require tymon/jwt-auth。在寫這篇文章的時(shí)候正處于過渡時(shí)期，因此你可能需要指定版本 (例如 1.0.0-rc.5)。
2. 如果你使用的是 Laravel5.4 及更低的版本，將該行 Tymon\JWTAuth\Providers\LaravelServiceProvider::class, 加入 config/app.php 的 providers 數(shù)組當(dāng)中。
3. 通過運(yùn)行 php artisan vendor:publish 來選擇 jwt-auth 軟件包發(fā)布配置文件。
4. 運(yùn)行 php artisan jwt:secret 以生成簽名應(yīng)用程序令牌所需要的密鑰。

完成之后，你需要決定哪些路由將受 JWT 保護(hù)并針對(duì) JWT 進(jìn)行身份驗(yàn)證。你可以使用內(nèi)置的 api auth 中間件來執(zhí)行此操作，或者也可以自己滾動(dòng)在發(fā)送請(qǐng)求的過程中獲取令牌。在 API 的登錄方法中，你將使用相同的 auth()->attempt 方法作為默認(rèn)的 Laravel 應(yīng)用程序，但從它返回的除外是你應(yīng)該傳遞回的 JSON Web Token 令牌。

從那里，你的 Vue 應(yīng)用程序應(yīng)該存儲(chǔ)該令牌 (存儲(chǔ)在 LocalStorage 或者 Vuex)，在每一個(gè)傳出請(qǐng)求中，都將它加入到 Authorization header 作為授權(quán)頭。回到你的 Laravel 應(yīng)用，你可以使用他們的令牌來引用特定用戶的請(qǐng)求。將應(yīng)該顯示給他們的數(shù)據(jù)返回回去。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論