引言

在 Vue 應(yīng)用中，導(dǎo)航守衛(wèi)（Navigation Guards）是實(shí)現(xiàn)權(quán)限控制、登錄驗(yàn)證、頁面加載前數(shù)據(jù)預(yù)取等關(guān)鍵功能的核心機(jī)制。然而，開發(fā)者常因守衛(wèi)注冊(cè)位置錯(cuò)誤、異步邏輯處理不當(dāng)或調(diào)用時(shí)機(jī)誤解，導(dǎo)致守衛(wèi)“看似寫了卻沒生效”。本文通過典型錯(cuò)誤示例、原理分析和規(guī)范實(shí)踐，幫助你正確使用全局、路由級(jí)和組件內(nèi)守衛(wèi)。

一、典型錯(cuò)誤場(chǎng)景

錯(cuò)誤示例 1：全局前置守衛(wèi)未正確調(diào)用next()

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // ? 忘記調(diào)用 next(false) 或 next('/login')
    // 守衛(wèi)卡住，頁面無法跳轉(zhuǎn)
  }
  // ? 也忘記調(diào)用 next() 的成功分支
});

現(xiàn)象：

點(diǎn)擊鏈接后頁面“卡死”，URL 不變，控制臺(tái)無報(bào)錯(cuò)，但路由未切換。

錯(cuò)誤示例 2：組件內(nèi)守衛(wèi)未在選項(xiàng)式 API 中正確定義

<script>
export default {
  // ? 錯(cuò)誤：將守衛(wèi)寫在 methods 中
  methods: {
    beforeRouteEnter(to, from, next) {
      console.log('不會(huì)執(zhí)行！');
      next();
    }
  }
};
</script>

現(xiàn)象：

守衛(wèi)函數(shù)從未被調(diào)用，因?yàn)?Vue Router 僅識(shí)別直接定義在組件選項(xiàng)根級(jí)的守衛(wèi)方法。

錯(cuò)誤示例 3：異步操作未等待完成就調(diào)用next()

router.beforeEach(async (to, from, next) => {
  const user = await fetchUser(); // 異步獲取用戶信息
  if (user.role !== 'admin') {
    next('/forbidden');
  }
  next(); // ? 在條件判斷外重復(fù)調(diào)用 next()
});

現(xiàn)象：

即使用戶無權(quán)限，仍會(huì)跳轉(zhuǎn)到目標(biāo)頁面，因?yàn)?next() 被多次調(diào)用，最后一次覆蓋了重定向。

錯(cuò)誤示例 4：路由級(jí)守衛(wèi)未綁定到具體路由

// router/index.js
const routes = [
  {
    path: '/admin',
    component: Admin,
    // ? 忘記添加 beforeEnter 守衛(wèi)
  }
];

// 單獨(dú)定義但未關(guān)聯(lián)
function adminGuard(to, from, next) {
  if (!isAdmin()) next('/login');
  else next();
}

現(xiàn)象：
守衛(wèi)函數(shù)存在但未生效，因?yàn)槲磳⑵滟x值給路由配置的 beforeEnter 屬性。

二、問題根源分析

1.next()的調(diào)用規(guī)則

• 每個(gè)守衛(wèi)必須且只能調(diào)用一次 next()
• 若不調(diào)用 next()，導(dǎo)航將被掛起（pending）
• 多次調(diào)用 next() 會(huì)導(dǎo)致不可預(yù)測(cè)行為（Vue Router v3 允許，v4 報(bào)警告）

2. 守衛(wèi)的注冊(cè)位置要求

3. 異步邏輯的處理方式

• 守衛(wèi)支持 async/await，但需確保所有分支都調(diào)用 next()
• 避免在 next() 后繼續(xù)執(zhí)行邏輯（可能導(dǎo)致多次調(diào)用）

三、正確解決方案

全局前置守衛(wèi)：確保單次next()調(diào)用

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (isAuthenticated()) {
      next(); // 允許訪問
    } else {
      next('/login'); // 重定向到登錄頁
    }
  } else {
    next(); // 無需認(rèn)證，直接放行
  }
});

組件內(nèi)守衛(wèi)：正確定義在組件選項(xiàng)根級(jí)

<script>
export default {
  // ? 正確：直接定義在組件選項(xiàng)中
  beforeRouteEnter(to, from, next) {
    // 注意：此處不能訪問 this（組件實(shí)例未創(chuàng)建）
    next(vm => {
      // vm 是組件實(shí)例，可在此設(shè)置數(shù)據(jù)
      vm.loadData();
    });
  },

  beforeRouteUpdate(to, from, next) {
    // 可訪問 this
    this.fetchData(to.params.id);
    next();
  },

  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('離開頁面將丟失未保存內(nèi)容');
    if (answer) {
      next();
    } else {
      next(false); // 取消導(dǎo)航
    }
  }
};
</script>

路由獨(dú)享守衛(wèi)：綁定到具體路由

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next('/unauthorized');
      }
    }
  }
];

異步守衛(wèi)：使用 async/await 并確保分支完整

router.beforeEach(async (to, from, next) => {
  try {
    const user = await getCurrentUser();
    
    if (to.meta.requiresAdmin && user.role !== 'admin') {
      next('/forbidden');
      return; // 避免后續(xù)代碼執(zhí)行
    }
    
    next();
  } catch (error) {
    console.error('Auth check failed:', error);
    next('/error');
  }
});

四、注意事項(xiàng)與最佳實(shí)踐

避免在守衛(wèi)中直接操作 DOM
守衛(wèi)應(yīng)在路由切換前完成邏輯判斷，而非修改頁面內(nèi)容。

組件內(nèi)守衛(wèi)的 this 訪問限制

• beforeRouteEnter：不能訪問 this（組件未創(chuàng)建），可通過 next(vm => { ... }) 獲取實(shí)例
• beforeRouteUpdate / beforeRouteLeave：可安全訪問 this

守衛(wèi)執(zhí)行順序
導(dǎo)航觸發(fā)時(shí)，守衛(wèi)按以下順序執(zhí)行：

全局 beforeEach → 路由獨(dú)享 beforeEnter → 組件內(nèi) beforeRouteLeave → 
解析異步路由 → 組件內(nèi) beforeRouteUpdate / beforeRouteEnter → 
全局 beforeResolve → 導(dǎo)航確認(rèn) → 全局 afterEach

不要在 afterEach 中調(diào)用 next()
afterEach 是后置鉤子，無 next 參數(shù)，僅用于分析、日志等副作用操作。

Vue Router v4 的變化

• 移除了 next() 的隱式調(diào)用（必須顯式調(diào)用）
• 多次調(diào)用 next() 會(huì)拋出警告

權(quán)限驗(yàn)證建議放在全局守衛(wèi)
將通用邏輯（如登錄狀態(tài)檢查）放在 beforeEach，特定路由邏輯放在 beforeEnter，避免重復(fù)代碼。

五、總結(jié)

導(dǎo)航守衛(wèi)失效通常源于三個(gè)核心問題：

• 未正確調(diào)用 next()（遺漏或多調(diào)用）
• 守衛(wèi)未注冊(cè)在有效位置（如組件內(nèi)守衛(wèi)寫錯(cuò)層級(jí)）
• 異步邏輯未妥善處理（未等待完成或分支不完整）

遵循以下原則可確保守衛(wèi)可靠運(yùn)行：

• 每個(gè)守衛(wèi)路徑只調(diào)用一次 next()
• 組件內(nèi)守衛(wèi)定義在選項(xiàng)根級(jí)
• 異步操作使用 async/await 并用 return 避免后續(xù)執(zhí)行

通過規(guī)范使用各類守衛(wèi)，可構(gòu)建健壯的路由控制邏輯，保障應(yīng)用的安全性和用戶體驗(yàn)。

以上就是一文詳解Vue導(dǎo)航守衛(wèi)未生效問題：為什么路由守衛(wèi)不執(zhí)行或邏輯失效？的詳細(xì)內(nèi)容，更多關(guān)于Vue導(dǎo)航守衛(wèi)未生效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！