面试题：Vue Router路由元信息在嵌套路由权限控制中的应用

Question

在一个具有多层嵌套路由的Vue项目中，例如 /parent/:parentId/child/:childId 这样的结构，不同角色（如访客、会员、管理员）对于不同层级的嵌套路由有不同的访问权限。请阐述如何利用Vue Router的路由元信息来精准实现这种复杂的嵌套路由权限控制，包括如何在路由配置、导航守卫以及组件中协同工作来完成权限判断和页面渲染。

Answer 1

1. 路由配置：

   • 在路由配置中，为每个路由添加meta字段，在meta字段里定义权限相关信息。例如：

   const routes = [
       {
           path: '/parent/:parentId',
           name: 'Parent',
           component: ParentComponent,
           meta: {
               requiresAuth: true,
               roles: ['member', 'admin']
           },
           children: [
               {
                   path: 'child/:childId',
                   name: 'Child',
                   component: ChildComponent,
                   meta: {
                       requiresAuth: true,
                       roles: ['admin']
                   }
               }
           ]
       }
   ];
   

   • requiresAuth表示该路由是否需要登录，roles表示允许访问该路由的角色。

2. 导航守卫：

   • 使用全局前置守卫router.beforeEach来进行权限判断。

   import router from './router';
   import store from './store';
   
   router.beforeEach((to, from, next) => {
       const userRole = store.getters.userRole;
       const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
       const hasRole = to.matched.some(record => {
           const roles = record.meta.roles;
           return roles && roles.includes(userRole);
       });
   
       if (requiresAuth &&!store.getters.isAuthenticated) {
           // 用户未登录，跳转到登录页面
           next('/login');
       } else if (requiresAuth && hasRole) {
           // 用户有访问权限，继续导航
           next();
       } else if (requiresAuth &&!hasRole) {
           // 用户无访问权限，跳转到403页面
           next('/forbidden');
       } else {
           // 不需要登录，继续导航
           next();
       }
   });
   

   • 在守卫中，从store获取用户角色userRole，通过to.matched遍历匹配到的路由记录，判断是否需要登录以及用户是否有相应角色权限。

3. 组件中：

   • 在组件内部，可以通过$route.meta访问到当前路由的元信息。例如，如果需要在组件内根据权限动态显示某些元素：

   <template>
       <div>
           <div v-if="$route.meta.roles.includes($store.getters.userRole)">
               <button>只有特定角色可见的按钮</button>
           </div>
       </div>
   </template>
   

   • 这样可以在组件渲染时，根据路由元信息和用户角色来决定是否渲染某些元素，进一步细化权限控制。