Vue-router-拦截器

Vue 路由拦截

在 Vue.js 中，路由拦截是指在用户访问特定路由之前，对访问进行授权

安装依赖

• 首先，确保已经安装了Vue和Vue Router：

npm install vue vue-router

创建 Vue Router 实例

• 在你的 Vue 项目中，创建并配置Vue Router实例。这个实例将用于管理应用的路由。

// 导入 Vue 和 VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

// 启用 VueRouter 插件
Vue.use(VueRouter)

// 创建 VueRouter 实例
const router = new VueRouter({
  routes: [
    // 定义路由
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})

export default router

路由拦截

• 全局前置守卫

Vue Router 提供了全局前置守卫。使用 router.beforeEach 方法来添加全局前置守卫。

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 在这里执行你的拦截逻辑

  // 检查用户是否已登录
  if (!isAuthenticated()) {
    // 如果未登录，则重定向到登录页
    next('/login')
  } else {
    // 如果已登录，则继续路由切换
    next()
  }
})

上述示例中，我们通过调用 next('/login') 将用户重定向到登录页，如果用户已登录则调用 next() 继续路由切换。

• 路由独享的守卫

Vue Router 还支持路由独享的守卫。可以在每个具体路由上定义独立的守卫，仅在该路由上生效。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 路由独享的守卫逻辑，仅在此路由生效

        // 检查用户是否有管理员权限
        if (!isAdmin()) {
          // 如果没有管理员权限，则重定向到其他页面
          next('/')
        } else {
          // 如果有管理员权限，则继续路由切换
          next()
        }
      }
    },
    // 更多路由...
  ]
})

上例中， beforeEnter 方法定义了路由独享的守卫。如果用户没有管理员权限，将重定向到其他页面。

• 组件内的守卫

使用 beforeRouteEnter 、beforeRouteUpdate 和 beforeRouteLeave 方法来添加守卫。

export default {
  beforeRouteEnter (to, from, next) {
    // 在进入路由之前执行的逻辑

    // 检查用户是否有访问此组件的权限
    if (!isAllowed()) {
      // 如果没有权限，则定向到其他页面
      next('/')
    } else {
      // 如果有权限，则继续路由切换
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 在路由更新之前执行的逻辑

    // 在组件复用时，可以在此更新一些数据或执行其他操作
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 在离开路由之前执行的逻辑

    // 可以在此做一些确认操作或保存数据
    next()
  }
}

这些守卫方法可以在组件内部定义，用于控制特定路由的行为。

通过使用 Vue 路由拦截，可以在路由切换前执行一些授权、验证或其他操作