將數據從 Laravel 傳送到 vue 的四種方式

文章轉發自專業的Laravel開發者社區，原始連接：learnku.com/laravel/t/3…

在過去的兩三年裏，我一直在研究同時使用 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 假定您嘗試訪問的窗口對象位於同一組件內：

// 不會起做用
<template>
    <div v-if="window.showSecretWindow">
        <h1>這是個祕密窗口，別告訴任何人！</h1>
    </div>
</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 應用，你可使用他們的令牌來引用特定用戶的請求。將應該顯示給他們的數據返回回去。