Web應用的安全認證至關重要。它能實現(xiàn)個性化體驗，加載特定於用戶的專屬內(nèi)容（例如登錄狀態(tài)），還能用於評估權限，防止未經(jīng)授權的用戶訪問私密信息。

應用程序通常通過將內(nèi)容置於特定路由下並構建重定向規(guī)則來保護內(nèi)容，根據(jù)用戶的權限引導用戶訪問或遠離資源。為了可靠地將內(nèi)容置於受保護的路由之後，需要構建獨立的靜態(tài)頁面。這樣，重定向規(guī)則才能正確處理重定向。

對於使用Vue等現(xiàn)代前端框架構建的單頁應用程序(SPA)，無法使用重定向規(guī)則來保護路由。因為所有頁面都來自單個入口文件，從瀏覽器的角度來看，只有一個頁面：index.html。在SPA中，路由邏輯通常源於路由文件。本文將主要在此處進行身份驗證配置。我們將特別依靠Vue的導航守衛(wèi)來處理身份驗證特定的路由，因為這有助於我們在路由完全解析之前訪問選定的路由。讓我們深入了解一下它是如何工作的。

路由基礎

導航守衛(wèi)是Vue Router中的一個特定功能，它提供了關於路由解析方式的附加功能。它們主要用於處理錯誤狀態(tài)，並在不突然中斷用戶工作流程的情況下無縫地引導用戶。

Vue Router中有三大類守衛(wèi)：全局守衛(wèi)、路由獨享守衛(wèi)和組件守衛(wèi)。顧名思義，全局守衛(wèi)在觸發(fā)任何導航時調用（即URL更改時），路由獨享守衛(wèi)在調用關聯(lián)路由時調用（即URL與特定路由匹配時），組件守衛(wèi)在創(chuàng)建、更新或銷毀路由中的組件時調用。在每個類別中，還有其他方法可以讓你更精細地控制應用程序路由。以下是Vue Router中每種導航守衛(wèi)中所有可用方法的快速分解。

全局守衛(wèi)

• beforeEach ：進入任何路由之前的操作（無法訪問此作用域）
• beforeResolve ：在導航確認之前，但在組件守衛(wèi)之後的操作（與beforeEach相同，具有此作用域訪問權限）
• afterEach ：路由解析後的操作（無法影響導航）

路由獨享守衛(wèi)

• beforeEnter ：進入特定路由之前的操作（與全局守衛(wèi)不同，此守衛(wèi)可以訪問this）

組件守衛(wèi)

• beforeRouteEnter ：在導航確認之前以及組件創(chuàng)建之前執(zhí)行的操作（無法訪問this）
• beforeRouteUpdate ：調用使用相同組件的新路由後執(zhí)行的操作
• beforeRouteLeave ：離開路由之前的操作

保護路由

為了有效地實現(xiàn)它們，了解在任何給定場景中何時使用它們會有所幫助。例如，如果你想跟蹤頁面瀏覽量以進行分析，你可能想使用全局afterEach守衛(wèi)，因為它在路由和相關組件完全解析後被觸發(fā)。如果你想在路由解析之前預取數(shù)據(jù)到Vuex存儲中，你可以使用beforeEnter路由獨享守衛(wèi)來實現(xiàn)。

由於我們的示例處理的是基於用戶訪問權限保護特定路由，我們將使用組件守衛(wèi)，即beforeEnter鉤子。此導航守衛(wèi)允許我們在解析完成之前訪問正確的路由；這意味著我們可以在允許用戶通過之前獲取數(shù)據(jù)或檢查數(shù)據(jù)是否已加載。在深入探討其工作原理的實現(xiàn)細節(jié)之前，讓我們簡要了解一下beforeEnter鉤子如何融入我們現(xiàn)有的路由文件中。下面是我們的示例路由文件，其中包含我們受保護的路由，恰當?shù)孛麨閜rotected。我們將向其中添加beforeEnter鉤子，如下所示：

 const router = new VueRouter({
  routes: [
    ...
    {
      path: "/protected",
      name: "protected",
      component: import(/* webpackChunkName: "protected" */ './Protected.vue'),
      beforeEnter(to, from, next) {
        // 邏輯在此處}
    }
  ]
})

路由結構

beforeEnter的結構與Vue Router中其他可用的導航守衛(wèi)沒有什麼不同。它接受三個參數(shù)： to ，應用程序正在導航到的“未來”路由； from ，應用程序正在離開的“當前/即將過去的”路由； next ，必須調用的函數(shù)才能使路由成功解析。

通常，在使用Vue Router時，next是無需任何參數(shù)調用的。但是，這假設了一個永久的成功狀態(tài)。在我們的例子中，我們希望確保未經(jīng)授權的用戶無法進入受保護的資源，並且有替代路徑可以適當?shù)刂囟ㄏ蛩麄儭榇?，我們將向next傳遞一個參數(shù)。為此，我們將使用路由名稱來導航用戶，如果他們未經(jīng)授權，則如下所示：

 next({
  name: "dashboard"
})

讓我們假設在我們的例子中，我們有一個Vuex存儲，我們在此存儲用戶的授權令牌。為了檢查用戶是否具有權限，我們將檢查此存儲，並適當?shù)厥』蛲ㄟ^路由。

 beforeEnter(to, from, next) {
  // 檢查vuex存儲//
  if (store.getters["auth/hasPermission"]) {
    next()
  } else {
    next({
      name: "dashboard" // 返回安全路由//
    });
  }
}

為了確保事件同步發(fā)生，並且在Vuex操作完成之前路由不會過早加載，讓我們將導航守衛(wèi)轉換為使用async/await。

 async beforeEnter(to, from, next) {
  try {
    var hasPermission = await store.dispatch("auth/hasPermission");
    if (hasPermission) {
      next()
    }
  } catch (e) {
    next({
      name: "dashboard" // 返回安全路由//
    })
  }
}

記住來源

到目前為止，我們的導航守衛(wèi)實現(xiàn)了其目的，即通過將未經(jīng)授權的用戶重定向到他們可能來自的地方（即儀表板頁面）來防止他們訪問受保護的資源。即便如此，這樣的工作流程也是具有破壞性的。由於重定向是意外的，用戶可能會認為是用戶錯誤，並嘗試反復訪問路由，最終認為應用程序已損壞。為了解決這個問題，讓我們創(chuàng)建一個方法來讓用戶知道何時以及為什麼他們被重定向。

我們可以通過向next函數(shù)傳遞查詢參數(shù)來實現(xiàn)這一點。這允許我們將受保護的資源路徑附加到重定向URL。因此，如果你想提示用戶登錄應用程序或獲得正確的權限而無需記住他們停止的地方，你可以這樣做。我們可以通過傳遞給beforeEnter函數(shù)的to路由對象訪問受保護資源的路徑，如下所示：to.fullPath。

 async beforeEnter(to, from, next) {
  try {
    var hasPermission = await store.dispatch("auth/hasPermission");
    if (hasPermission) {
      next()
    }
  } catch (e) {
    next({
      name: "login", // 返回安全路由//
      query: { redirectFrom: to.fullPath }
    })
  }
}

通知

增強用戶無法訪問受保護路由的工作流程的下一步是向他們發(fā)送消息，讓他們知道錯誤以及如何解決問題（通過登錄或獲得正確的權限）。為此，我們可以使用組件守衛(wèi)，特別是beforeRouteEnter，來檢查是否發(fā)生了重定向。因為我們將重定向路徑作為查詢參數(shù)傳遞到我們的路由文件中，所以我們現(xiàn)在可以檢查路由對像以查看是否發(fā)生了重定向。

 beforeRouteEnter(to, from, next) {
  if (to.query.redirectFrom) {
    // 做一些事情//
  }
}

正如我前面提到的，所有導航守衛(wèi)都必須調用next才能使路由解析。正如我們前面看到的，next函數(shù)的優(yōu)點是我們可以向其傳遞一個對象。你可能不知道的是，你也可以在next函數(shù)中訪問Vue實例。哇！這就是它的樣子：

 next(() => {
  console.log(this) // this是Vue實例})

你可能已經(jīng)註意到，在使用beforeEnter時，你並沒有技術上訪問this作用域。雖然可能是這種情況，但你仍然可以通過將vm傳遞給函數(shù)來訪問Vue實例，如下所示：

 next(vm => {
  console.log(vm) // this是Vue實例})

這尤其方便，因為你現(xiàn)在可以輕鬆地創(chuàng)建和適當?shù)馗戮哂邢嚓P錯誤消息的數(shù)據(jù)屬性，而無需任何額外的配置。使用此方法，你將得到這樣的組件：

<template><div>
    {{ errorMsg }}

    ...

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "對不起，您沒有訪問請求路由的權限"
      })
    } else {
      next()
    }
  }
}
</script>

結論

將身份驗證集成到應用程序中的過程可能很棘手。我們介紹瞭如何防止未經(jīng)授權的用戶訪問路由，以及如何根據(jù)用戶的權限構建工作流程，以將用戶重定向到受保護的資源或遠離受保護的資源。到目前為止，我們的假設是你已經(jīng)在你的應用程序中配置了身份驗證。如果你還沒有配置它，並且你想快速啟動和運行，我強烈建議使用身份驗證即服務。有一些提供商，如Netlify的身份驗證小部件或Auth0的鎖。

以上是使用導航警衛(wèi)保護VUE路線的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！