vue实现路由拦截

路由拦截的实现方式

在Vue中，可以通过Vue Router的导航守卫（Navigation Guards）实现路由拦截。导航守卫分为全局守卫、路由独享守卫和组件内守卫三种类型。

全局前置守卫

使用router.beforeEach注册全局前置守卫，在路由跳转前进行拦截。常用于权限验证、登录状态检查等场景。

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth() // 检查用户是否登录
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') // 跳转到登录页
  } else {
    next() // 放行
  }
})

路由独享守卫

在路由配置中直接定义beforeEnter守卫，仅对该路由生效。

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) {
        next('/forbidden') // 非管理员跳转
      } else {
        next()
      }
    }
  }
]

组件内守卫

在组件内部使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 组件实例还未创建，不能访问this
    next(vm => {
      // 通过vm访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 离开路由前的确认
    if (confirm('确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

元信息与权限控制

利用路由的meta字段存储权限信息，结合导航守卫实现精细控制。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  }
]

router.beforeEach((to, from, next) => {
  const userRole = getUserRole()
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/unauthorized')
  } else {
    next()
  }
})

异步路由与拦截

对于动态加载的路由，可以在路由配置完成后添加全局守卫。

router.beforeResolve(async to => {
  if (to.meta.requiresAsyncData) {
    await fetchAsyncData()
  }
})

错误处理

通过router.onError捕获路由导航过程中的错误。

router.onError(error => {
  console.error('路由错误:', error)
  // 跳转到错误页面
})

通过合理组合这些守卫和元信息，可以实现复杂的路由拦截逻辑，满足各种权限控制和导航管理的需求。