Vue 路由跳转时如何判断用户权限

在 Vue 开发的项目中，确保用户只能访问其被授权的页面是至关重要的。通过合理地在路由跳转时判断用户权限，能有效提升系统的安全性和用户体验。

要明确用户权限的管理方式。常见的做法是在用户登录成功后，服务器返回包含用户权限信息的令牌（Token）。前端将这个 Token 存储在本地，比如 localStorage 或 Vuex 中。

在 Vue 项目里，路由守卫是实现权限判断的关键工具。全局前置守卫 router.beforeEach 可以在每次路由切换前执行代码。在这个守卫函数中，我们可以获取当前用户的权限信息，并与目标路由所需的权限进行比对。

例如，假设我们有一个简单的权限系统，不同角色（管理员、普通用户）有不同的页面访问权限。我们可以在路由配置对象中，为每个路由添加一个 meta 字段，用来定义该路由所需的权限。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminPage,
      meta: { requiresAuth: true, roles: ['admin'] }
    },
    {
      path: '/user',
      component: UserPage,
      meta: { requiresAuth: true, roles: ['user', 'admin'] }
    }
  ]
});

然后在全局前置守卫中进行权限判断：

router.beforeEach((to, from, next) => {
  const user = JSON.parse(localStorage.getItem('user')); // 获取用户信息
  if (to.meta.requiresAuth) {
    if (!user) {
      next('/login'); // 用户未登录，跳转到登录页
    } else {
      const hasPermission = to.meta.roles.includes(user.role);
      if (hasPermission) {
        next(); // 有权限，继续跳转
      } else {
        next('/no-permission'); // 无权限，跳转到无权限提示页
      }
    }
  } else {
    next(); // 不需要权限，直接跳转
  }
});

通过上述代码，我们可以在路由跳转时，根据用户的角色和目标路由所需的权限，灵活地控制用户的访问。这样一来，未授权的用户无法访问受限页面，从而保障了系统的安全性。

在 Vue 路由跳转时判断用户权限，需要结合路由守卫、用户权限信息管理等多个方面。通过合理的设计和代码实现，能够打造出一个安全且易用的前端应用。