面试题：Vue项目中基于角色的权限管理，如何在路由层面实现权限控制？

Question

在Vue项目里，若要实现基于角色的权限管理，路由是重要的控制环节。请描述在Vue Router中，如何通过配置和逻辑编写，使得不同角色能够访问特定的路由页面，同时阻止无权限角色访问。需阐述具体的配置步骤和相关代码逻辑。

Answer 1

配置步骤

1. 定义路由元信息（meta）：在路由配置中，为每个需要权限控制的路由添加 meta 字段，在其中定义 roles 字段来指定允许访问该路由的角色。

   const router = new VueRouter({
     routes: [
       {
         path: '/admin',
         name: 'admin',
         component: AdminComponent,
         meta: {
           roles: ['admin']
         }
       },
       {
         path: '/user',
         name: 'user',
         component: UserComponent,
         meta: {
           roles: ['user', 'admin']
         }
       }
     ]
   });
   

2. 导航守卫（全局前置守卫）：使用 Vue Router 的全局前置守卫 beforeEach 来检查用户角色并判断是否有权限访问目标路由。

   router.beforeEach((to, from, next) => {
     const userRole = getUserRole(); // 假设该函数能获取当前用户角色
     if (to.matched.some(record => record.meta.roles)) {
       if (!to.meta.roles.includes(userRole)) {
         next({ path: '/no - permission' }); // 跳转到无权限页面
       } else {
         next();
       }
     } else {
       next();
     }
   });
   

相关代码逻辑解释

1. 路由元信息定义：meta 字段是 Vue Router 提供的自定义数据区域。roles 数组列出了允许访问该路由的角色。例如，/admin 路由只有 admin 角色能访问，而 /user 路由 user 和 admin 角色都能访问。
2. 导航守卫逻辑：
   • to.matched.some(record => record.meta.roles)：检查目标路由是否配置了 meta.roles，如果配置了则进行权限检查。
   • !to.meta.roles.includes(userRole)：判断当前用户角色是否不在允许访问的角色列表中，如果不在则跳转到无权限页面 /no - permission。
   • 如果目标路由没有配置 meta.roles 或者当前用户角色在允许列表中，则调用 next() 正常进入目标路由。

假设 getUserRole 函数可以从本地存储、cookie 或者通过 API 获取当前用户的角色信息。同时，还需要创建一个无权限页面组件 NoPermissionComponent 并配置对应的路由。

const router = new VueRouter({
  routes: [
    {
      path: '/no - permission',
      name: 'no - permission',
      component: NoPermissionComponent
    }
  ]
});