使用導航警衛保護VUE路線

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

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

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

路由基礎

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

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

全局守衛

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

路由獨享守衛

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

組件守衛

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

保護路由

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

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

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

路由結構

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

通常，在使用Vue Router時，next是無需任何參數調用的。但是，這假設了一個永久的成功狀態。在我們的例子中，我們希望確保未經授權的用戶無法進入受保護的資源，並且有替代路徑可以適當地重定向他們。為此，我們將向next傳遞一個參數。為此，我們將使用路由名稱來導航用戶，如果他們未經授權，則如下所示：

 next({
  name: "dashboard"
})

讓我們假設在我們的例子中，我們有一個Vuex存儲，我們在此存儲用戶的授權令牌。為了檢查用戶是否具有權限，我們將檢查此存儲，並適當地失敗或通過路由。

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

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

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

記住來源

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

我們可以通過向next函數傳遞查詢參數來實現這一點。這允許我們將受保護的資源路徑附加到重定向URL。因此，如果你想提示用戶登錄應用程序或獲得正確的權限而無需記住他們停止的地方，你可以這樣做。我們可以通過傳遞給beforeEnter函數的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 }
    })
  }
}

通知

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

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

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

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

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

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

這尤其方便，因為你現在可以輕鬆地創建和適當地更新具有相關錯誤消息的數據屬性，而無需任何額外的配置。使用此方法，你將得到這樣的組件：

<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>

結論

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

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