在過去的兩三年里,我一直在研究同時使用 Vue 和 Laravel 的項目,在每個項目開發(fā)的開始階段,我必須問自己 “我將如何將數(shù)據(jù)從 Laravel 傳遞到 Vue ?”。這適用于 Vue 前端組件與 Blade 模板緊密耦合的兩個應用程序,以及運行完全獨立于 Laravel 后端的單頁應用程序。
這里有四種不同的方法從一個到另一個獲取數(shù)據(jù)。
直接回顯到數(shù)據(jù)對象或組件屬性中
可以說是將數(shù)據(jù)從 Laravel 應用程序移動到 Vue 前端的最簡單方法。使用上面的任何一種方法,您都可以將 JSON 編碼的數(shù)據(jù)回送給您的應用程序或其組件。
然而,最大的缺點是可擴展性。您的 JavaScript 需要直接暴露在模板文件中,以便引擎可以呈現(xiàn)您的數(shù)據(jù)。如果您使用 Vue 向 Laravel 站點的頁面或區(qū)域添加一些基本的交互,這應該不是問題,但是您很容易就會遇到將數(shù)據(jù)強制放入壓縮腳本的困難。
對于 Laravel 5.5+ 使用 json 指令:
使用自定義組件和 Laravel 自身的 json blade 指令可以讓您輕松地將數(shù)據(jù)移動到道具中。此方法允許您劃分 Vue 代碼,將腳本與 Webpack 或 Mix 捆綁在一起,同時仍可以直接向其中注入數(shù)據(jù)。
將屬性作為全局窗口注入
雖然這看起來有點老生常談,但將數(shù)據(jù)添加到窗口對象中可以輕松地創(chuàng)建全局變量,這些變量可以從應用程序中使用的任何其他腳本或組件訪問。在過去,我用它作為存儲和訪問 API 基 URL、公鑰、特定模型 ID 和各種其他需要在整個前端使用的小數(shù)據(jù)項的方法。
不過,使用此方法有一點需要注意,這就是訪問 Vue 組件內(nèi)部數(shù)據(jù)的方式。在模板內(nèi)部,您將無法使用以下內(nèi)容,因為 Vue 假定您嘗試訪問的窗口對象位于同一組件內(nèi):
// 不會起作用 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>
如果這個方法的用例是較小的字符串或數(shù)值,并且使用 Laravel 自身的 mix 來編譯,那么事情實際上會變得非常簡單。您可以使用 process.env 對象引用 JavaScript 中 .env 文件中的值。例如,如果我的環(huán)境變量文件中有 API_DOMAIN=example.com,我可以在我的 Vue 組件(或使用 mix 編譯的其他 JavaScript )中使用 process.env.API_DOMAIN。
將 API 與 Laravel 自身的 web 中間件和 CSRF 令牌一起使用
對我來說,這個解決方案是 Vue 前端 + Laravel 后端世界中最簡單的入門方法。 Laravel 提供了兩個不同的路由文件:web.php 和 api.php。它們被拉入并通過應用程序 Providers 目錄中的 RouteServiceProvider.php 文件映射。默認情況下,web 組的中間件設置為 web,api 組的中間件設置為 api。
追溯到 app/Http/Kernel.php
;您會注意到,在第 30 行左右,有兩個組被映射到一個數(shù)組中,這個 web 組包含會話、 cookie 加密和 CSRF 令牌驗證等內(nèi)容。同時,api 組只有一個基本的限制和一些綁定。如果您的目標只是通過一個基本的、輕量級的 api 將信息拉入 Vue ,而這個 api 不需要身份驗證或 post 請求,那么您可以到此為止。否則,可以進行一次修改,以確保在幾秒鐘內(nèi)與 Vue 完全兼容。
回到上面的 RouteServiceProvider,
交換出 web 方法中的 api 中間件。我們?yōu)槭裁匆@樣做?這樣做有什么作用嗎?它使我們通過 api 拉入的路由也可以包含應用程序的常規(guī)網(wǎng)絡路由通常會使用到的所有會話標量和令牌。當使用 axios 或者其他異步 JavaScript http 調(diào)用的時候,我們可以在后端使 Auth::user () 或者其他的驗證技術,而默認的 api 就無法做到這些。
這個方法唯一警告的是,你必須使用 Laravel 和 一個 blade 模板來渲染前端。這樣框架可以將必要的會話令牌和變量注入到請求當中。
使用 JWT 認證的 API 調(diào)用
JSON Web Tokens 是安全的,易于使用的方法來鎖定對 API 端點的訪問,并使用了 Tymon'sjwt-auth 擴展包,在這個基礎上,用來構(gòu)建新的項目或者在現(xiàn)有的 Laravel 應用中使用絕對是一件簡單的事情。
要在 API 上安裝和配置此功能,只需要幾個簡單的步驟:
完成之后,你需要決定哪些路由將受 JWT 保護并針對 JWT 進行身份驗證。你可以使用內(nèi)置的 api auth 中間件來執(zhí)行此操作,或者也可以自己滾動在發(fā)送請求的過程中獲取令牌。在 API 的登錄方法中,你將使用相同的 auth()->attempt 方法作為默認的 Laravel 應用程序,但從它返回的除外是你應該傳遞回的 JSON Web Token 令牌。
從那里,你的 Vue 應用程序應該存儲該令牌 (存儲在 LocalStorage 或者 Vuex),在每一個傳出請求中,都將它加入到 Authorization header 作為授權頭?;氐侥愕?Laravel 應用,你可以使用他們的令牌來引用特定用戶的請求。將應該顯示給他們的數(shù)據(jù)返回回去。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。