摘要

導航守衛是 Vue Router 提供的一種機制，它允許我們在路由發生變化前、中、後「攔截」導航，並執行自訂邏輯，最常用於實現權限驗證。

定義與說明

守衛可以被註冊在不同層級：全域 router.beforeEach、單一路由 beforeEnter 或元件內部 onBeforeRouteUpdate。beforeEach 是最常用的全域前置守衛，它在每次導航觸發時都會被呼叫，並接收 to、from 和 next 三個參數。

實作範例

實現登入驗證的導航守衛

// router/index.js - 實現一個簡單的登入驗證
router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isLoggedIn) {
    // 將使用者重導向到登入頁
    next({ name: 'login' });
  } else {
    // 否則，正常放行
    next();
  }
});

結論

導航守衛是保護應用程式路由、實現複雜權限控制的核心。它像一個門衛，確保只有符合條件的導航才能被執行。

導航守衛權限驗證 beforeEach