What is Vue Router Guards
類似後端Router的middleware. 提供一個function決定是否可以導到目標url.
每個守衛方法接收三個參數
to: Route: 即將要進入的目標 路由對象
from: Route: 當前 guard 正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。
next(false): 中斷當前的 guard。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from 路由對應的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的 guard 被中斷，然後進行一個新的 guard。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: ‘home’ 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。
範例
要導到/foo此url時, 他會先執行 checkToken這function
Why need multiple guards
如果有各種不同權限可以進入不同的url, 只使用一個guard, 會讓該guard更複雜. 所以當許要哪個 guard再補上可以使程式更彈性.
How to use multiple guards
再router/index.js 補上 function gaurds. (參考Reference 2: github上的解決方法 )
使用方法
beforeEnter: guards([checkToken, checkAdmin])
