面试题：Vue中如何通过Vue Router的路由元信息实现简单的用户权限控制？

Question

假设一个Vue项目，有普通用户和管理员两种角色，普通用户只能访问首页和个人中心，管理员除了能访问上述页面还能访问后台管理页面。请描述使用Vue Router路由元信息实现这种权限控制的具体步骤，包括如何定义路由元信息、在导航守卫中如何进行判断。

Answer 1

1. 定义路由元信息： 在router/index.js文件中定义路由时，添加meta字段来表示角色权限。例如：

   const routes = [
       {
           path: '/home',
           name: 'Home',
           component: Home,
           meta: {
               roles: ['admin', 'user']
           }
       },
       {
           path: '/personal',
           name: 'Personal',
           component: Personal,
           meta: {
               roles: ['admin', 'user']
           }
       },
       {
           path: '/admin',
           name: 'Admin',
           component: Admin,
           meta: {
               roles: ['admin']
           }
       }
   ];
   

2. 在导航守卫中进行判断： 在router/index.js中设置全局前置守卫，根据用户角色判断是否有权限访问。假设通过store来存储用户角色信息。

   import router from './router';
   import store from './store';
   router.beforeEach((to, from, next) => {
       const userRole = store.getters.getUserRole;
       if (to.meta.roles &&!to.meta.roles.includes(userRole)) {
           // 用户没有权限，重定向到首页
           next('/home');
       } else {
           next();
       }
   });