路由守衛簡介

路由守衛主要可以用在三個地方 : 「全域」、「路由」、「元件」。
而關於路由守衛，我們可以簡單理解成 :

當我們在執行路由跳轉，路由守衛會在你變更路由的前、中、後，攔截並檢查你所要執行的操作。常見於登入驗證，檢查使用者是否擁有期限之內的 token，若為否則導回登入頁面。

全域守衛

beforeEach

當你進入任何一個路由之前，都會觸發。

使用情境 : 身分驗證

• to: 即將進入的路由。
• from: 從哪裡進來的路由。
• next: 用來表示繼續往下執行

const router = createRouter({...})
router.beforeEach((to,from,next)=>{
 if(to.name !== 'Login' && !isAuthenticated){
     next({ name: 'Login' });
 }else{
     next();
 }
})

注意 : Vue Router 4 開始 next()已非必要選項，所以以上程式碼我們可以改寫成 :

router.beforeEach((to,from,next)=>{
 if(to.name !== 'Login' && !isAuthenticated){
    return { name: 'Login' };
 }
})

beforeResolve

和 beforeEach 一樣會在進入路由前觸發，但會晚於 beforeEach 之後觸發。

router.beforeResolve((to, from, next) => {
 // ...
}

afterEach

當你進入任何一個路由之後，都會觸發。

使用情境 : 可搭配 GA 記錄使用者的瀏覽紀錄。

router.afterEach((to,from,failure)=>{
 // failure 參數表示路由跳轉失敗
 if (!failure){
     sendToAnalytics(to.fullPath);
 } else {
   // ...
 }
})

參考文章:
4-4 路由守衛
不只懂 Vue 語法：試解釋如何使用導航守衛？