如何在Vue JS 3中制作两个角色登录的两个权限菜单

const roles = {
  admin: {
    dashboard: true,
    users: true,
    settings: true
  },
  user: {
    dashboard: true,
    users: false,
    settings: true
  }
};

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  },
  {
    path: '/users',
    component: Users,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/settings',
    component: Settings,
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const Menu = {
  template: `
    <ul>
      <li v-if="hasPermission('dashboard')"><router-link to="/dashboard">Dashboard</router-link></li>
      <li v-if="hasPermission('users')"><router-link to="/users">Users</router-link></li>
      <li v-if="hasPermission('settings')"><router-link to="/settings">Settings</router-link></li>
    </ul>
  `,
  methods: {
    hasPermission(permission) {
      const role = getCurrentUserRole(); // 获取当前用户的角色
      return roles[role][permission];
    }
  }
};

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth;
  const roles = to.meta.roles;

  if (requiresAuth && !isLoggedIn()) {
    next('/login'); // 如果需要登录但用户未登录，则跳转到登录页面
  } else if (requiresAuth && roles && !hasRole(roles)) {
    next('/403'); // 如果用户角色不满足路由要求的角色，则跳转到403页面
  } else {
    next(); // 其他情况下，允许访问该路由
  }
});