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

Question

How can I go about populating a sidebar with appropriate menu items based on user role?. i need to show and hide some components based on user or admin login in vuejs.

Answer 1

One way would be in the created life-cycle function, get the user_role , then have a computed property compute what should be shown in the sidebar. This way you can change the users and get new sidebars each time the component is rendered.

Answer 2

You have to check the user role and add a 'permission' field in menu.

Here is an example:

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