使用导航警卫保护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中文网其他相关文章！