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

在Vue JS 3中制作两个角色登录的两个权限菜单，可以通过以下步骤实现：

定义角色和权限：首先，需要定义两个角色和它们各自的权限。可以使用一个对象来表示每个角色，对象的属性可以是权限的名称，值可以是布尔类型，表示是否具有该权限。例如：

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

在上面的例子中，admin角色具有dashboard、users和settings权限，而user角色只具有dashboard和settings权限。

创建路由和菜单：根据角色的权限，创建对应的路由和菜单。可以使用Vue Router来管理路由，使用Vue的组件来表示菜单项。例如：

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];
    }
  }
};

在上面的例子中，使用Vue Router创建了三个路由，分别对应dashboard、users和settings页面。每个路由都有一个meta字段，其中requiresAuth表示是否需要登录，roles表示允许访问该路由的角色。在菜单组件中，根据当前用户的角色和权限来决定显示哪些菜单项。

实现登录和权限验证：在Vue应用中，可以使用Vuex来管理用户的登录状态和角色信息。在登录时，保存用户的角色信息到Vuex中。在路由导航守卫中，根据路由的meta字段进行权限验证。例如：

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(); // 其他情况下，允许访问该路由
  }
});

在上面的例子中，使用Vue Router的beforeEach方法来进行路由导航守卫。如果路由需要登录但用户未登录，则跳转到登录页面；如果用户角色不满足路由要求的角色，则跳转到403页面；否则允许访问该路由。

综上所述，以上是在Vue JS 3中制作两个角色登录的两个权限菜单的步骤。根据具体需求，可以根据角色和权限定义路由和菜单，并在登录和路由导航守卫中进行权限验证。