[教程]掌握Vue3路由守卫，轻松实现项目权限管理

在Vue3项目中，路由守卫（Routing Guards）是确保用户访问正确页面的关键组成部分，特别是在需要实现权限管理的情况下。路由守卫可以在路由导航的不同阶段进行检查，比如导航确认前、激活后或者解...

在Vue3项目中，路由守卫（Routing Guards）是确保用户访问正确页面的关键组成部分，特别是在需要实现权限管理的情况下。路由守卫可以在路由导航的不同阶段进行检查，比如导航确认前、激活后或者解析守卫等。通过合理地使用路由守卫，我们可以轻松实现项目的权限管理。

一、路由守卫概述

Vue Router提供了三种路由守卫：

1. 全局守卫：在导航发生之前或之后进行全局性拦截。
2. 路由独享守卫：在单个路由内部定义，只对该路由生效。
3. 组件内守卫：在组件内部定义，针对该组件的导航进行拦截。

二、全局守卫

全局守卫可以在路由跳转的整个过程中进行拦截，适用于检查用户是否登录、是否有权限访问等。

1. 全局前置守卫

在全局前置守卫中，可以在路由跳转前进行登录状态的检查。

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

2. 全局解析守卫

全局解析守卫在路由跳转时执行，可以用来处理异步逻辑。

router.beforeResolve((to, from, next) => { // 在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用 if (to.matched.some(record => record.meta.requiresAuth)) { // 获取异步组件数据 fetchData(to).then(() => { next(); }).catch(err => { next(false); }); } else { next(); }
});

3. 全局后置钩子

全局后置钩子在导航被确认后执行，适用于设置导航完成后需要执行的操作。

router.afterEach((to, from) => { // 导航被确认后调用 console.log(`Navigated from ${from.path} to ${to.path}`);
});

三、路由独享守卫

路由独享守卫只针对特定的路由进行权限检查。

const router = new VueRouter({ routes: [ { path: '/admin', component: AdminComponent, meta: { requiresAuth: true }, beforeEnter: (to, from, next) => { if (isUserLoggedIn()) { next(); } else { next('/login'); } } } ]
});

四、组件内守卫

组件内守卫允许你在组件内部拦截导航，适用于对特定组件进行权限控制。

export default { beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 if (isUserLoggedIn()) { next(); } else { next('/login'); } }, beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 if (isUserLoggedIn()) { next(); } else { next('/login'); } }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 if (isUserLoggedIn()) { next(); } else { next('/login'); } }
};

五、权限管理示例

以下是一个简单的权限管理示例，展示了如何在Vue3项目中使用路由守卫实现权限控制。

const router = new VueRouter({ routes: [ { path: '/login', component: Login }, { path: '/admin', component: Admin, meta: { requiresAuth: true } }, { path: '/user', component: User, meta: { requiresAuth: true, roles: ['user'] } }, { path: '/guest', component: Guest, meta: { requiresAuth: false } } ]
});
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!isUserLoggedIn()) { next('/login'); } else if (to.meta.roles && !to.meta.roles.includes(userRole())) { next('/unauthorized'); } else { next(); } } else { next(); }
});

在这个例子中，我们使用meta字段来定义路由的权限需求。对于需要权限的路由，我们检查用户是否登录，以及是否有相应的角色。如果用户没有权限，则重定向到登录页面或未授权页面。

六、总结

通过使用Vue3路由守卫，我们可以轻松地在项目中实现权限管理。无论是全局路由守卫、路由独享守卫还是组件内守卫，都可以帮助我们确保用户只能访问他们有权访问的页面。合理地使用路由守卫，可以让我们的Vue3项目更加安全和可靠。