登录后根据用户角色显示不同的侧边栏项目或隐藏某些组件（VUEJS）

Question

如何根据用户角色使用适当的菜单项填充侧边栏？ 我需要根据 vuejs 中的用户或管理员登录显示和隐藏一些组件。

Answer 1

一种方法是在created的生命周期 function 中，获取user_role ，然后让computed属性计算应在侧栏中显示的内容。 这样，您可以在每次渲染组件时更改用户并获得新的侧边栏。

Answer 2

您必须检查用户角色并在菜单中添加“权限”字段。

这是一个例子：

{
  id: "dashboard",
  icon: "iconsminds-monitor-analytics",
  label: "menu.dashboard",
  to: "/app/dashboard",
  permission: ["ROLE_ADMIN", "ROLE_TECHNICIAN", "ROLE_DOCTOR"],
},