根据用户角色显示侧边栏菜单元素，使用 "yaminncco/vue-sidebar-menu" 包

Question

您好，我正在使用 Laravel Breeze with Inertia JS。我正在使用 “yaminncco / vue-sidebar-menu 包” 作为侧边栏。

我在问是否有一种方法可以根据用户角色显示菜单元素（管理员：查看所有内容，简单用户不能，....）。包文档中没有关于此的内容。

因此，如果有人有想法或可以建议在使用 Laravel Breeze 时构建侧边栏的更好方法（或包）？

谢谢

Answer 1

如果这是您想在所有页面中执行的操作，您可以通过 HandleInertiarRequests 中间件 share 方法共享属性。

public function share(Request $request)
{
   return array_merge(parent::share($request), [
      'user_role' => Auth::user()->role
   ]);
}

现在，您的所有页面都将在 Vue 页面组件的 $pages.props.user_role 处收到此道具。然后你可以这样做：

<template>
    <sidebar-menu v-if="user_role === 'admin'" :menu="menu" />
</template>

<script>
export default {
   props: {
      user_role: String
   }
}
</script>

如果您在不是页面组件的 Vue 组件上使用侧边栏组件，例如，在布局组件中，您将从 $page.props:

<template>
    <sidebar-menu v-if="user_role === 'admin'" :menu="menu" />
</template>

<script>
export default {
   computed: {
      user_role () {
         return this.$page.props.user_role
      }
   }
}
</script>

如果您想 select 菜单应根据 user_role 呈现哪些菜单项，您可以计算 menu 属性:

export default {
   data () {
      return {
         menuItems: [
            {
               href: '/',
               title: 'Dashboard',
               icon: 'fa fa-user'
            },
            {
               href: '/charts',
               title: 'Charts',
               icon: 'fa fa-chart-area',
               admin: true
            } 
         ]
      }
   },
   computed: {
      menu () {
         if (this.user_role === 'admin') {
            return this.menuItems // return all the items
         }

         return this.menuItems.filter((item) => {
            return !item.admin // return only items NOT marked as admin
         })
      }
   }
}

Answer 2

您可以根据您的用户角色（或根据用户组）隐藏菜单项。确保通过调用函数获取菜单实例，因为每次都必须更新隐藏属性。示例：


function getMenu() {
  return [
    {
      header: 'Main Navigation'
    },
    {
      href: '/',
      title: 'Dashboard',
      hidden: !checkPermission(DashboardPage.groups),
    }
    {
      href: '/configuration',
      title: 'Configuration',
      hidden: !checkPermission(ConfigurationPage.groups),
    }
  ]
}

const menuComputed = computed(() => {
  if(loggedIn.value) {
    return getMenu();
  }
  else {
    return menuLoginOnly.value;
  }
});

...

 <sidebar-menu
   class="sidebar"
   :menu="menuComputed"/>

根据用户角色显示侧边栏菜单元素，使用 "yaminncco/vue-sidebar-menu" 包

Display sidebar menu elements based on user's role, with "yaminncco/vue-sidebar-menu" package

sidebar

inertiajs

laravel

vue.js

laravel-breeze