vue怎么实现路由拦截

路由拦截的实现方法

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

全局前置守卫

使用router.beforeEach注册一个全局前置守卫，在路由跳转前进行拦截处理。该方法接收三个参数：to（目标路由）、from（当前路由）和next（回调函数）。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

路由独享守卫

在路由配置中直接定义beforeEnter守卫，只对当前路由生效。

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) {
        next('/unauthorized')
      } else {
        next()
      }
    }
  }
]

组件内守卫

在组件内部使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave守卫实现更细粒度的控制。

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被确认前调用
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    if (hasUnsavedChanges()) {
      next(false)
    } else {
      next()
    }
  }
}

权限验证示例

结合路由元信息和全局守卫实现基于权限的路由拦截。

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = checkAuthStatus()

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

异步路由拦截

当需要异步获取权限信息时，可以返回Promise或在守卫中使用async/await。

router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const userRole = await getUserRole()

  if (requiresAuth && userRole !== 'admin') {
    next('/forbidden')
  } else {
    next()
  }
})

以上方法可以根据具体业务需求组合使用，实现灵活的路由拦截功能。