vue如何实现路由拦截

Vue 路由拦截的实现方法

在 Vue 中实现路由拦截主要通过 Vue Router 的导航守卫功能。以下是几种常见的实现方式：

全局前置守卫

使用 router.beforeEach 可以在路由跳转前进行拦截，常用于权限验证或登录状态检查。

const router = new VueRouter({ ... })

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

路由独享守卫

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

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

组件内守卫

在组件内部通过 beforeRouteEnter、beforeRouteUpdate 或 beforeRouteLeave 实现更细粒度的控制。

export default {
  beforeRouteEnter(to, from, next) {
    // 注意：此时组件实例尚未创建
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    const answer = confirm('确定要离开吗？')
    if (answer) next()
    else next(false)
  }
}

动态路由权限控制

结合后端返回的权限数据动态生成路由表，实现精细化权限管理。

// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}

登录状态检查

常见于需要登录才能访问的页面拦截。

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token')
  if (to.meta.auth && !isLogin) {
    next('/login?redirect=' + to.path)
  } else {
    next()
  }
})

实现路由拦截时需要注意守卫的执行顺序，避免死循环跳转，合理处理异步逻辑，并考虑用户体验。对于复杂权限系统，建议结合路由元信息（meta）和后端返回的权限数据进行动态路由配置。