前言

在寫Vue項目的時候，少不了使用路由vue-router，而路由守衛(wèi)是vue-router中一個非常重要的概念，也是非常重要的技巧。它能夠很好的幫助開發(fā)者“監(jiān)視”每一個跳轉的路由。

一、什么是導航守衛(wèi)

正如其名，vue-router 提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的。Vue3對應的是vue-router4，下面就對它們進行一一講解。

二、全局前置守衛(wèi)

最常用的是全局前置導航守衛(wèi)，你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)：

const router = createRouter({ ... })
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消導航
  return false
})

當一個導航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調用。守衛(wèi)是異步解析執(zhí)行，此時導航在所有守衛(wèi) resolve 完之前一直處于等待中。

每個守衛(wèi)方法接收兩個參數(shù)：

• to: 即將要進入的目標（將要前往的路由）
• from: 當前導航正要離開的路由

可以返回的值如下:

• false: 取消當前的導航。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。
• 路由地址: 通過一個路由地址跳轉到一個不同的地址，就像調用router.push()一樣，你可以設置諸如 replace: true 或 name: 'home' 之類的配置。當前的導航被中斷，然后進行一個新的導航，就和 from 一樣。

 router.beforeEach(async (to, from) => {
   // 檢查用戶是否已登錄，避免無限重定向
   if ( !isAuthenticated && to.name !== 'Login' ) {
     // 將用戶重定向到登錄頁面
     return { name: 'Login' }
   }
 })

如果遇到了意料之外的情況，可能會拋出一個 Error。這會取消導航并且調用router.onError() 注冊過的回調。

如果什么都沒有，undefined 或返回 true，則導航是有效的，并調用下一個導航守衛(wèi)

以上所有都同 async 函數(shù) 和 Promise 工作方式一樣：

router.beforeEach(async (to, from) => {
  // canUserAccess() 返回 `true` 或 `false`
  const canAccess = await canUserAccess(to)
  if (!canAccess) return '/login'
})

可選的第三個參數(shù) next

在之前的 Vue Router 版本中，也是可以使用 第三個參數(shù) next 的。這是一個常見的錯誤來源，可以通過 RFC 來消除錯誤。然而，它仍然是被支持的，這意味著你可以向任何導航守衛(wèi)傳遞第三個參數(shù)。在這種情況下，確保 next 在任何給定的導航守衛(wèi)中都被嚴格調用一次。它可以出現(xiàn)多于一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鉤子永遠都不會被解析或報錯。這里有一個在用戶未能驗證身份時重定向到/login的錯誤用例：

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用戶未能驗證身份，則 `next` 會被調用兩次
  next()
})

下面是正確的版本:

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

三、全局解析守衛(wèi)

你可以用 router.beforeResolve 注冊一個全局守衛(wèi)。這和 router.beforeEach 類似，因為它在每次導航時都會觸發(fā)，但是確保在導航被確認之前，同時在所有組件內守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被正確調用。這里有一個例子，確保用戶可以訪問 自定義 meta 屬性 requiresCamera 的路由：

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 處理錯誤，然后取消導航
        return false
      } else {
        // 意料之外的錯誤，取消導航并把錯誤傳給全局處理器
        throw error
      }
    }
  }
})

router.beforeResolve 是獲取數(shù)據或執(zhí)行任何其他操作（如果用戶無法進入頁面時你希望避免執(zhí)行的操作）的理想位置。

四、全局后置鉤子

你也可以注冊全局后置鉤子，當跳轉到了當面界面，做一些操作。然而和守衛(wèi)不同的是，這些鉤子不會接受 next 函數(shù)也不會改變導航本身：

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

它們對于分析、更改頁面標題、聲明頁面等輔助功能以及許多其他事情都很有用。

router.after((to,from)=>{
  document.title = to.meta.title
})

它們也反映了 navigation failures 作為第三個參數(shù)：

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

了解更多關于 navigation failures 的信息在它的指南中。

五、路由獨享的守衛(wèi)

你可以直接在路由配置上定義 beforeEnter 守衛(wèi)：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

beforeEnter 守衛(wèi) 只在進入路由時觸發(fā)，不會在 params、query 或 hash 改變時觸發(fā)。例如，從 /users/2 進入到 /users/3 或者從 /users/2#info 進入到 /users/2#projects。它們只有在 從一個不同的 路由導航時，才會被觸發(fā)。

你也可以將一個函數(shù)數(shù)組傳遞給 beforeEnter，這在為不同的路由重用守衛(wèi)時很有用：

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}
function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

請注意，你也可以通過使用路徑 meta 字段和全局導航守衛(wèi)來實現(xiàn)類似的行為

六、組件內的守衛(wèi)

最后，你可以在路由組件內直接定義路由導航守衛(wèi)(傳遞給路由配置的)

可用的配置 API

你可以為路由組件添加以下配置：

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染該組件的對應路由被驗證前調用
    // 不能獲取組件實例 `this` ！
    // 因為當守衛(wèi)執(zhí)行時，組件實例還沒被創(chuàng)建！
  },
  beforeRouteUpdate(to, from) {
    // 在當前路由改變，但是該組件被復用時調用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 `/users/:id`，在 `/users/1` 和 `/users/2` 之間跳轉的時候，
    // 由于會渲染同樣的 `UserDetails` 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
    // 因為在這種情況發(fā)生的時候，組件已經掛載好了，導航守衛(wèi)可以訪問組件實例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在導航離開渲染該組件的對應路由時調用
    // 與 `beforeRouteUpdate` 一樣，它可以訪問組件實例 `this`
  },
}

beforeRouteEnter 守衛(wèi) 不能 訪問 this，因為守衛(wèi)在導航確認前被調用，因此即將登場的新組件還沒被創(chuàng)建。

不過，你可以通過傳一個回調給 next 來訪問組件實例。在導航被確認的時候執(zhí)行回調，并且把組件實例作為回調方法的參數(shù)：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

注意 beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛(wèi)。對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持 傳遞回調，因為沒有必要了：

beforeRouteUpdate (to, from) {
  // just use `this`
  this.name = to.params.name
}

這個 離開守衛(wèi) 通常用來預防用戶在還未保存修改前突然離開。該導航可以通過返回 false 來取消。

beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
}

使用組合 API

如果你正在 使用組合 API 和 setup 函數(shù)來編寫組件，你可以通過 onBeforeRouteUpdate 和 onBeforeRouteLeave 分別添加 update 和 leave 守衛(wèi)。

七、完整的導航解析流程

• 導航被觸發(fā)。
• 在失活的組件里調用 beforeRouteLeave 守衛(wèi)。
• 調用全局的 beforeEach 守衛(wèi)。
• 在重用的組件里調用 beforeRouteUpdate 守衛(wèi)(2.2+)。
• 在路由配置里調用 beforeEnter。
• 解析異步路由組件。
• 在被激活的組件里調用 beforeRouteEnter。
• 調用全局的 beforeResolve 守衛(wèi)(2.5+)。
• 導航被確認。
• 調用全局的 afterEach 鉤子。
• 觸發(fā) DOM 更新。
• 調用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調函數(shù)，創(chuàng)建好的組件實例會作為回調函數(shù)的參數(shù)傳入。

以上就是Vue Router4路由導航守衛(wèi)實例全面解析的詳細內容，更多關于Vue Router4路由導航的資料請關注腳本之家其它相關文章！

最新評論