vue2 路由守卫详细讲解

620 阅读4分钟

1、基本介绍 Vue.js 提供的路由守卫(Navigation Guards)机制,使得开发者可以在路由导航时拦截和处理一些操作,例如验证用户是否登录、权限检查等。本文将介绍 Vue.js 路由守卫的使用方法,并提供一些示例代码。

Vue.js 路由守卫分为全局前置守卫、全局后置守卫、路由独享守卫和组件内守卫四种类型。下面是各种类型守卫函数的定义和执行时机:

全局前置守卫 (beforeEach):在路由导航之前调用,常用于进行全局的登录验证和权限检查。

全局后置守卫 (afterEach):在路由导航之后调用,常用于记录日志和统计数据等操作。

路由独享守卫 (beforeEnter):在单个路由配置中定义,仅在该路由触发时调用,常用于路由级别的登录验证和权限检查。

组件内守卫 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave):在组件实例创建之前、组件实例复用时和组件实例销毁之前调用,常用于组件级别的登录验证和权限检查。

以下是使用全局前置守卫实现登录验证的示例代码:

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  const isAuthenticated = localStorage.getItem('token')

  // 如果用户未登录且要访问非登录页面,则跳转到登录页
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})
export default router

在上面的代码中,我们首先创建了两个路由,分别是登录页和仪表盘页。然后使用全局前置守卫 beforeEach 来拦截所有路由导航,并进行登录验证。如果用户未登录且要访问非登录页面,则跳转到登录页。否则,继续进行路由导航。

除了全局前置守卫之外,我们还可以使用其他类型的路由守卫来完成更多的操作。在实际开发中,根据不同的业务需求和场景,可以选择合适的路由守卫类型,并结合具体的代码实现来完成相应的功能。

总之,Vue.js 的路由守卫提供了一种简单

2、不同类型的路由守卫可以应用于不同的业务场景,以下是一些常见的应用场景:

全局前置守卫 (beforeEach):常用于进行全局的登录验证和权限检查。在用户访问需要登录才能访问的页面时,可以使用该守卫拦截路由导航,并检查用户是否已登录。如果用户未登录,则跳转到登录页。另外,还可以在该守卫中检查用户权限,如果权限不足,则跳转到没有权限访问的页面。

全局后置守卫 (afterEach):常用于记录日志和统计数据等操作。例如,在用户访问某个页面时,可以使用该守卫记录用户的访问日志,统计用户的访问次数和时长等数据。

路由独享守卫 (beforeEnter):常用于路由级别的登录验证和权限检查。在某些特定页面需要进行特殊处理时,可以使用该守卫在路由配置中定义。例如,在管理员后台页面中,可以使用该守卫拦截路由导航,并检查用户是否是管理员。如果不是管理员,则跳转到没有权限访问的页面。

组件内守卫 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave):常用于组件级别的登录验证和权限检查。例如,在用户访问某个需要进行登录才能访问的组件时,可以使用该守卫在组件内部进行登录验证。另外,在用户离开当前组件之前,也可以使用该守卫进行必要的数据保存和清理工作。

总之,路由守卫可以帮助我们实现更加灵活和安全的路由导航功能。在实际开发中,需要根据具体的业务需求和场景选择合适的守卫类型,并结合具体的代码实现来完成相应的功能。

3、关于路由守卫的面试题

  • 请简要介绍一下路由守卫的作用和种类。
  • 请简要介绍一下 beforeRouteEnter 守卫和 beforeRouteUpdate 守卫的区别。
  • 请简要介绍一下路由守卫中 next 函数的用法和作用。
  • 如何在路由守卫中实现异步操作?
  • 请举一个实际的场景例子,说明如何在路由守卫中进行登录验证。
  • 请举一个实际的场景例子,说明如何在路由守卫中进行权限检查。
  • 请举一个实际的场景例子,说明如何在路由守卫中进行数据预处理。
  • 请简要介绍一下路由守卫的执行顺序。
  • 请简要介绍一下全局前置守卫 (beforeEach) 和全局后置守卫 (afterEach) 的区别和作用。
  • 如何在路由守卫中实现页面跳转?