Vue Router 实现路由守卫与权限控制的方法

在 Vue.js 开发中，路由守卫与权限控制是保障应用安全和用户体验的重要环节。Vue Router 提供了强大的路由守卫功能，让开发者能够灵活地控制用户对不同路由的访问。

了解一下什么是路由守卫。路由守卫是指在路由切换过程中执行的函数，可以用来进行一些验证、加载数据等操作。Vue Router 提供了多种类型的路由守卫，包括全局守卫、路由独享守卫和组件内守卫。

全局守卫通过 router.beforeEach、router.beforeEnter 和 router.afterEach 来定义。beforeEach 是在每次路由切换前都会执行的函数，接收 to、from 和 next 三个参数。to 表示即将进入的路由对象，from 表示当前离开的路由对象，next 用于控制路由的继续跳转。例如，在进行权限验证时，可以检查用户是否登录：

router.beforeEach((to, from, next) => {
    const isLoggedIn = localStorage.getItem('token');
    if (to.meta.requiresAuth &&!isLoggedIn) {
        next('/login');
    } else {
        next();
    }
});

这段代码表示，如果目标路由的 meta 字段中设置了 requiresAuth 且用户未登录，则跳转到登录页面。

路由独享守卫是在路由配置中直接定义的守卫，通过 beforeEnter 选项来设置。例如：

const routes = [
    {
        path: '/admin',
        component: AdminComponent,
        beforeEnter: (to, from, next) => {
            const isAdmin = localStorage.getItem('role') === 'admin';
            if (isAdmin) {
                next();
            } else {
                next('/');
            }
        }
    }
];

此代码确保只有角色为 admin 的用户才能访问 /admin 路由。

组件内守卫则是在组件内部定义的守卫，包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。例如，beforeRouteLeave 可以用于在用户离开当前组件时进行确认提示：

export default {
    beforeRouteLeave(to, from, next) {
        const answer = window.confirm('你确定要离开吗？');
        if (answer) {
            next();
        } else {
            next(false);
        }
    }
};

通过合理运用这些路由守卫，我们能够轻松实现复杂的权限控制逻辑，确保用户只能访问他们有权限的页面，提升应用的安全性和可靠性。无论是简单的登录验证，还是复杂的角色权限管理，Vue Router 的路由守卫都能提供有效的解决方案。