vue 三种路由守卫

Vue 路由守卫允许你在路由导航过程中对路由进行拦截和控制，这对于进行权限验证、数据预加载等任务非常有用。Vue Router 提供了三种类型的路由守卫：全局前置守卫、路由独享守卫和组件内的守卫。

全局前置守卫:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 假设这是你的用户角色
const user = {
  isAdmin: true
};

// 创建组件
const Home = { template: '<div>Home</div>' };
const Admin = { template: '<div>Admin</div>' };

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/admin', component: Admin, meta: { requiresAdmin: true } }
  ]
});

// 全局前置守卫，用于权限控制
router.beforeEach((to, from, next) => {
  // 检查路由是否需要管理员权限
  if (to.matched.some(record => record.meta.requiresAdmin)) {
    // 如果用户是管理员，放行
    if (user.isAdmin) {
      next();
    } else {
      // 否则重定向到首页或者其他页面
      next('/');
    }
  } else {
    next();
  }
});

// 创建 Vue 实例并挂载到 #app 元素
new Vue({
  router,
  el: '#app'
});

在这个例子中，我们创建了两个简单的组件：Home 和 Admin。我们设置了一个路由 /admin，并且为它添加了一个 meta 属性 { requiresAdmin: true }，表示这个路由需要管理员权限才能访问。

然后我们使用 router.beforeEach 创建了一个全局前置守卫，每次路由导航之前都会执行这个守卫。在守卫函数中，我们检查要跳转的路由是否需要管理员权限，如果需要并且当前用户不是管理员，我们就会重定向到首页 /。

这样，我们就实现了一个简单的权限控制。当用户试图访问管理员页面时，如果他不是管理员，就会被重定向到首页；如果是管理员，就可以正常访问。



路由独享守卫：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 假设这是你的用户角色
const user = {
  isAdmin: true
};

// 创建组件
const Home = { template: '<div>Home</div>' };
const Admin = { template: '<div>Admin</div>' };

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/admin', component: Admin, meta: { requiresAdmin: true }, beforeEnter: requireAdmin }
  ]
});

// 路由独享守卫，用于权限控制
function requireAdmin(to, from, next) {
  // 如果用户是管理员，放行
  if (user.isAdmin) {
    next();
  } else {
    // 否则重定向到首页或者其他页面
    next('/');
  }
}

// 创建 Vue 实例并挂载到 #app 元素
new Vue({
  router,
  el: '#app'
});

在这个修改后的示例中，我们为 /admin 路由添加了 beforeEnter 属性，这是一种路由独享的守卫。它的作用与全局前置守卫类似，但只应用于特定的路由。在这个示例中，我们将 requireAdmin 函数指定为 beforeEnter 守卫，用于检查用户是否是管理员。

组件内的守卫：

// 在你的组件定义中
export default {
  data() {
    return {
      formData: {
        // 表单数据
      },
      formChanged: false
    };
  },
  methods: {
    // 保存表单数据的方法
    saveForm() {
      // 这里实现保存表单数据的逻辑
      this.formChanged = false;
    }
  },
  beforeRouteLeave(to, from, next) {
    // 如果表单数据发生了更改，弹出确认框
    if (this.formChanged) {
      const answer = window.confirm('您有未保存的更改。确定要离开吗？');
      if (answer) {
        // 用户确认离开，直接离开
        next();
      } else {
        // 用户取消离开，停留在当前页面
        next(false);
      }
    } else {
      // 表单数据没有更改，直接离开
      next();
    }
  }
};

在这个示例中，我们定义了一个组件，其中包含一个表单和一个 formChanged 数据属性，用于跟踪表单数据是否发生了更改。在 beforeRouteLeave 守卫中，我们检查 formChanged 属性。如果表单数据发生了更改，我们弹出一个确认框询问用户是否确定离开。根据用户的选择，我们使用 next() 方法来允许或阻止路由的导航。