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

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

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

路由基礎(chǔ)

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

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

全局守衛(wèi)

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

路由獨享守衛(wèi)

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

組件守衛(wèi)

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

保護(hù)路由

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

由于我們的示例處理的是基于用戶訪問權(quán)限保護(hù)特定路由，我們將使用組件守衛(wèi)，即beforeEnter鉤子。此導(dǎo)航守衛(wèi)允許我們在解析完成之前訪問正確的路由；這意味著我們可以在允許用戶通過之前獲取數(shù)據(jù)或檢查數(shù)據(jù)是否已加載。在深入探討其工作原理的實現(xiàn)細(xì)節(jié)之前，讓我們簡要了解一下beforeEnter鉤子如何融入我們現(xiàn)有的路由文件中。下面是我們的示例路由文件，其中包含我們受保護(hù)的路由，恰當(dāng)?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中其他可用的導(dǎo)航守衛(wèi)沒有什么不同。它接受三個參數(shù)：to，應(yīng)用程序正在導(dǎo)航到的“未來”路由；from，應(yīng)用程序正在離開的“當(dāng)前/即將過去的”路由；next，必須調(diào)用的函數(shù)才能使路由成功解析。

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

next({
  name: "dashboard"
})

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

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

為了確保事件同步發(fā)生，并且在Vuex操作完成之前路由不會過早加載，讓我們將導(dǎo)航守衛(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" // 返回安全路由 //
    })
  }
}

記住來源

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

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

通知

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

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

正如我前面提到的，所有導(dǎo)航守衛(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)建和適當(dā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)建工作流程，以將用戶重定向到受保護(hù)的資源或遠(yuǎn)離受保護(hù)的資源。到目前為止，我們的假設(shè)是你已經(jīng)在你的應(yīng)用程序中配置了身份驗證。如果你還沒有配置它，并且你想快速啟動和運行，我強烈建議使用身份驗證即服務(wù)。有一些提供商，如Netlify的身份驗證小部件或Auth0的鎖。

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