Vue 文档里路由鉴权函数怎么用

在 Vue 开发中，路由鉴权是保障应用安全与用户体验的关键环节。理解并正确使用 Vue 文档里的路由鉴权函数，能有效控制用户对不同路由的访问权限。

要明确路由鉴权的概念。简单来说，它就是根据用户的状态（如是否登录、拥有何种权限等）来决定是否允许用户访问特定的路由。在 Vue 中，路由鉴权函数起到了实现这一逻辑的重要作用。

Vue Router 提供了导航守卫（Navigation Guards）来实现路由鉴权。其中全局前置守卫 beforeEach 是最常用的鉴权函数之一。使用时，需要在路由配置文件中进行设置。例如：

import Router from 'vue-router';
const router = new Router({
  // 路由配置
});

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

export default router;

在这段代码里，beforeEach 函数接收三个参数：to 表示即将进入的目标路由对象，from 表示当前导航正要离开的路由，next 函数用于控制导航的流程。这里通过检查 localStorage 中是否存在 token 来判断用户是否登录。如果目标路由的 meta 属性中设置了 requiresAuth 且用户未登录，就将用户导航到登录页面；否则，允许用户继续访问。

除了全局前置守卫，还有路由独享守卫 beforeEnter。它直接定义在路由配置项中，只对当前路由生效。比如：

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

这样，当用户访问 /admin 路由时，会先检查用户的角色是否为 admin，只有满足条件才能进入。

通过合理运用这些路由鉴权函数，我们能够为 Vue 应用构建完善的权限管理体系，确保用户只能访问其有权限的页面，提升应用的安全性与可靠性。