vue动态路由配置角色不同

Vue.js 动态路由配置可以根据用户的角色不同提供个性化的权限控制。通常，这涉及到在 `router` 对象中使用 `beforeEach` 或者自定义的导航守卫（guards），如 `canActivate` 或 `meta`。以下是一个简单的例子：

// 定义一个包含角色信息的对象或变量
const roles = {
  admin: ['admin', 'manager'],
  manager: ['manager']
};

// 创建动态路由配置
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresRole: 'admin' },
    beforeEnter(to, from, next) {
      // 检查当前登录用户的角色
      const userRole = getUserRole(); // 这里获取用户实际的角色
      if (roles.includes(userRole)) {
        next();
      } else {
        next(false); // 如果用户角色不符合，阻止进入
      }
    }
  }
];

router.beforeEach((to, from, next) => {
  // 遍历所有需要检查权限的路由
  routes.some(route => route.meta.requiresRole && !roles.includes(getUserRole()) && !next({ name: route.name || to.name, params: to.params, query: to.query }));
});

// 函数 getUserRole() 用于从存储、API 或其他地方获取用户的角色
function getUserRole() {
  // 实现获取用户角色的具体逻辑
}