4-4 路由守衛(Navigation Guards) | vue router enter
VueRouter提供了NavigationGuards(VueRouter官方翻譯「導航守衛」,但是讀起來就覺得怪,本書以下統一採用原文「NavigationGuards」)Hook方法,作用類似於我們在1-7所介紹的生命週期函式,讓我們可以在特定的時機(變更路由的前後)去自動調用它們。NavigationGuards分別提供了「全域」、「路由」、「元件」這三種情況下不同的Hook供開發者們使用,接下來我們就按照順序一一介紹這些NavigationGuards的使用方式。beforeEach(全域)我們可以直接在router.beforeEach註冊對應的callback,這樣當「每一個」路由要進入之前,都會先經過這裡:...
Vue Router 提供了 Navigation Guards (Vue Router 官方翻譯「導航守衛」,但是讀起來就覺得怪,本書以下統一採用原文 「Navigation Guards」) Hook 方法,作用類似於我們在 1-7 所介紹的生命週期函式,讓我們可以在特定的時機 (變更路由的前後) 去自動調用它們。
Navigation Guards 分別提供了 「全域」、「路由」、「元件」 這三種情況下不同的 Hook 供開發者們使用, 接下來我們就按照順序一一介紹這些 Navigation Guards 的使用方式。
beforeEach (全域)我們可以直接在 router.beforeEach 註冊對應的 callback,這樣當「每一個」路由要進入之前,都會先經過這裡:
const router = createRouter({ ... }) router.beforeEach((to, from) => { });123456
我們可以在 router.beforeEach 的 callback 函式內取得 to 與 from,它們分別代表:
to: 即將進入的路由。 from: 從何處進入的路由。我們可以在這個 callback 函式裡面執行任何動作,例如身份驗證等等。
router.beforeEach(async (to, from) => { return await canUserAccess(to); })1234
當 canUserAccess 的結果回傳 false 時,路由的切換將會被禁止, 而回傳值若為 true 或是 undefined (預設情況),則表示路由可以正常執行。
而除了 to 與 from 之外,還有第三個參數 next。
Vue Router 在過去的版本中, next() 用來表示繼續往下執行的 callback,如果沒有呼叫它,路由就會中斷。
router.beforeEach((to, from, next) => { if (to.name !== Login && !isAuthenticated)...