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

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

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

路由基礎(chǔ)

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

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

全局守衛(wèi)

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

路由獨享守衛(wèi)

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

組件守衛(wèi)

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

保護路由

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

由於我們的示例處理的是基於用戶訪問權(quá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) {
        // 邏輯在此處}
    }
  ]
})

路由結(jié)構(gòu)

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

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

 next({
  name: "dashboard"
})

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

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

為了確保事件同步發(fā)生，並且在Vuex操作完成之前路由不會過早加載，讓我們將導航守衛(wèi)轉(zhuǎn)換為使用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)授權(quán)的用戶重定向到他們可能來自的地方（即儀表板頁面）來防止他們訪問受保護的資源。即便如此，這樣的工作流程也是具有破壞性的。由於重定向是意外的，用戶可能會認為是用戶錯誤，並嘗試反復訪問路由，最終認為應(yīng)用程序已損壞。為了解決這個問題，讓我們創(chuàng)建一個方法來讓用戶知道何時以及為什麼他們被重定向。

我們可以通過向next函數(shù)傳遞查詢參數(shù)來實現(xiàn)這一點。這允許我們將受保護的資源路徑附加到重定向URL。因此，如果你想提示用戶登錄應(yīng)用程序或獲得正確的權(quán)限而無需記住他們停止的地方，你可以這樣做。我們可以通過傳遞給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ā)送消息，讓他們知道錯誤以及如何解決問題（通過登錄或獲得正確的權(quán)限）。為此，我們可以使用組件守衛(wèi)，特別是beforeRouteEnter，來檢查是否發(fā)生了重定向。因為我們將重定向路徑作為查詢參數(shù)傳遞到我們的路由文件中，所以我們現(xiàn)在可以檢查路由對像以查看是否發(fā)生了重定向。

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

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

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

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

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

這尤其方便，因為你現(xiàn)在可以輕鬆地創(chuàng)建和適當?shù)馗戮哂邢嚓P(guān)錯誤消息的數(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 =
          "對不起，您沒有訪問請求路由的權(quán)限"
      })
    } else {
      next()
    }
  }
}
</script>

結(jié)論

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

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