当前位置： 技术文章>> Vue 项目如何实现基于 Vue Router 的守卫机制？

文章标题：Vue 项目如何实现基于 Vue Router 的守卫机制？
  • 文章分类: 后端
  • 6317 阅读

在Vue项目中，基于Vue Router的守卫机制是实现页面访问控制、权限校验、数据预加载等功能的强大工具。Vue Router提供了全局守卫、路由独享守卫和组件内守卫三种形式的守卫，它们允许我们在路由的不同阶段插入自定义逻辑。下面，我们将深入探讨这些守卫机制的实现方式，并结合实际案例来展示如何在Vue项目中灵活运用它们。

一、Vue Router守卫机制概览

Vue Router的守卫主要分为三类：

  1. 全局守卫：包括beforeEach、beforeResolve（Vue Router 2.5+）、afterEach等，它们在路由变化的全局范围内被调用。
  2. 路由独享守卫：在路由配置中直接定义，如beforeEnter，它只作用于该路由及其子路由。
  3. 组件内守卫：包括beforeRouteEnter、beforeRouteUpdate（Vue Router 2.2+）、beforeRouteLeave，这些守卫被定义在组件内部，用于控制组件在路由变化时的行为。

二、全局守卫的使用

1. beforeEach

beforeEach是最常用的全局守卫之一，它在路由即将改变前被调用，常用于权限校验、重定向等场景。

router.beforeEach((to, from, next) => {
  // 检查用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 假设有一个函数isAuthenticated()用于检查用户是否已登录
    if (!isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将尝试访问的路由地址传给登录页面
      });
    } else {
      next(); // 确保一定要调用 next()
    }
  } else {
    next(); // 确保一定要调用 next()
  }
});

2. afterEach

afterEach守卫在路由完成跳转后被调用，它不接受next函数，因此不能改变导航本身。但它非常适合于进行页面跳转后的收尾工作，如页面加载动画的隐藏、页面标题的更新等。

router.afterEach((to, from) => {
  // 假设有一个函数updateDocumentTitle()用于更新页面标题
  updateDocumentTitle(to.meta.title);
});

三、路由独享守卫

路由独享守卫beforeEnter允许你为特定路由定义守卫，这些守卫只在进入定义的路由时有效。这对于为特定页面设置独特的权限校验逻辑非常有用。

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 只有当用户具有管理员权限时才能进入
      if (hasAdminRole()) {
        next();
      } else {
        next({ path: '/403' });
      }
    }
  }
];

四、组件内守卫

组件内守卫允许我们在组件级别上控制路由的进入、更新和离开。

1. beforeRouteEnter

beforeRouteEnter在渲染该组件的对应路由被 confirm 前调用，此时组件实例还未被创建，不能获取组件实例this。你可以通过传一个回调给next来访问组件实例。

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例
      // 当守卫是异步的时候，你可以这样做
    });
  }
};

2. beforeRouteUpdate

beforeRouteUpdate守卫在路由改变，但是该组件被复用时调用。例如，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，由于会渲染同样的Foo组件，因此这个组件实例会被复用。而这个守卫就可以在这个情况下被调用。

export default {
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 组件的实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    this.someData = fetchData(to.params.id);
    next();
  }
};

3. beforeRouteLeave

beforeRouteLeave守卫在导航离开该组件的对应路由时调用，可以用来阻止一个即将离开的路由，例如，当用户填写了表单但还未保存时，突然想要离开页面。

export default {
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!');
    if (answer) {
      next();
    } else {
      next(false); // 取消路由跳转
    }
  }
};

五、实战案例：结合Vuex和Vue Router实现权限控制

在实际的项目中，权限控制是一个常见且重要的功能。我们可以结合Vuex和Vue Router来实现一个基本的权限控制机制。

  1. 定义路由和权限信息：在路由配置中，我们可以为需要权限控制的路由添加meta字段，指定所需的权限。
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  },
  // 其他路由...
];
  1. 全局守卫中进行权限校验：在beforeEach守卫中，通过检查Vuex中存储的用户权限信息，与路由所需的权限进行比对，决定是否允许访问。
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 从Vuex中获取用户权限信息
    const userRoles = store.getters.userRoles;
    if (!userRoles.length || !to.meta.roles.some(role => userRoles.includes(role))) {
      next({ path: '/403' }); // 权限不足，重定向到403页面
    } else {
      next();
    }
  } else {
    next();
  }
});
  1. Vuex管理用户状态：在Vuex中定义模块，用于管理用户的登录状态、角色等权限信息。
// store/modules/user.js
export default {
  namespaced: true,
  state: () => ({
    isAuthenticated: false,
    roles: []
  }),
  mutations: {
    SET_USER_ROLES(state, roles) {
      state.roles = roles;
    },
    SET_AUTHENTICATION_STATUS(state, status) {
      state.isAuthenticated = status;
    }
  },
  actions: {
    // 异步操作，如登录、获取用户信息等
  },
  getters: {
    userRoles: state => state.roles,
    isAuthenticated: state => state.isAuthenticated
  }
};

通过上述步骤，我们结合Vue Router的守卫机制和Vuex的状态管理，实现了一个基本的权限控制流程。这不仅提高了项目的安全性和用户体验，还使得权限控制逻辑更加清晰和易于维护。

结语

Vue Router的守卫机制是Vue项目中实现路由控制、权限校验等功能的重要工具。通过灵活运用全局守卫、路由独享守卫和组件内守卫，我们可以在路由的不同阶段插入自定义逻辑，从而实现对页面访问的精细控制。在实际项目中，结合Vuex等状态管理工具，可以构建出更加健壮和灵活的权限控制体系。希望本文的介绍能为你在Vue项目中实现路由守卫提供一些帮助和启发。在码小课网站上，你还可以找到更多关于Vue Router和Vuex的深入教程和实战案例，帮助你进一步提升在Vue项目开发中的能力。

推荐文章