快捷導(dǎo)航

Vue實(shí)現(xiàn)路由守衛(wèi)的示例代碼

更新時(shí)間：2025年09月25日 08:30:55 作者：一只游魚(yú)

Vue路由守衛(wèi)是控制頁(yè)面導(dǎo)航的鉤子函數(shù),主要用于鑒權(quán)、數(shù)據(jù)預(yù)加載等場(chǎng)景,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、概念

路由守衛(wèi)（Navigation Guards）本質(zhì)上就是 在路由跳轉(zhuǎn)前后，攔截用戶導(dǎo)航并做一些邏輯處理的鉤子函數(shù)。
常見(jiàn)用途有：

鑒權(quán)控制：比如沒(méi)有登錄就不允許進(jìn)入某些頁(yè)面。
數(shù)據(jù)預(yù)加載：在進(jìn)入某個(gè)頁(yè)面前，提前拉取數(shù)據(jù)。
頁(yè)面跳轉(zhuǎn)控制：比如離開(kāi)頁(yè)面前彈出“是否保存更改”的提示。

簡(jiǎn)單理解：路由守衛(wèi)就是 Vue Router 提供的一種“鉤子函數(shù)”，用來(lái)控制頁(yè)面導(dǎo)航的行為。

二、類型

Vue Router 提供了三類守衛(wèi)：

（1）全局守衛(wèi)

對(duì)所有路由跳轉(zhuǎn)都生效。

// 全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.meta.requiresAuth && !token) {
    // 需要登錄，但沒(méi) token，跳轉(zhuǎn)到登錄
    next('/login')
  } else {
    next()
  }
})
// 全局后置守衛(wèi)（一般用來(lái)修改標(biāo)題等）
router.afterEach((to) => {
  document.title = to.meta.title || '默認(rèn)標(biāo)題'
})
export default router

（2）路由獨(dú)享守衛(wèi)

只針對(duì)某一個(gè)路由生效。

{
  path: '/profile',
  component: () => import('@/views/Profile.vue'),
  beforeEnter: (to, from, next) => {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
}

（3）組件內(nèi)守衛(wèi)

直接寫(xiě)在組件里，對(duì)進(jìn)入/離開(kāi)當(dāng)前組件生效。

export default {
  name: 'Profile',
  // 進(jìn)入當(dāng)前組件之前
  beforeRouteEnter(to, from, next) {
    console.log('即將進(jìn)入 Profile 頁(yè)面')
    next()
  },
  // 路由更新（比如 /profile/1 -> /profile/2）
  beforeRouteUpdate(to, from, next) {
    console.log('路由參數(shù)變化，更新頁(yè)面數(shù)據(jù)')
    next()
  },
  // 離開(kāi)當(dāng)前組件時(shí)
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('確定要離開(kāi)嗎？未保存的數(shù)據(jù)會(huì)丟失')
    if (answer) {
      next()
    } else {
      next(false) // 阻止導(dǎo)航
    }
  }
}

三、實(shí)戰(zhàn)

以下為作者的演示：

全局守衛(wèi)
如果token過(guò)期或token錯(cuò)誤會(huì)返回到登錄頁(yè)面

注意：以上效果需要配合JWT來(lái)實(shí)現(xiàn)，詳情請(qǐng)看我的博客文章：

JWT令牌

在index.Js文件中寫(xiě)入全局守衛(wèi)：

// 全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token') // 從本地取 token
  if (to.meta.requiresAuth && !token) {
    // 如果需要登錄且沒(méi)有 token，就跳到登錄頁(yè)
    next({ path: '/' })
  } else {
    next() // 其他情況放行
  }
})

在request.Js中添加攔截器：

// 響應(yīng)攔截器：統(tǒng)一處理 401
request.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      localStorage.removeItem("token"); // 清除過(guò)期 token
      router.push("/"); // 跳轉(zhuǎn)到登錄頁(yè)
    }
    return Promise.reject(error);
  }
);

可以試驗(yàn)一下，登錄成功進(jìn)入ai頁(yè)面后：