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

Question

您好，我正在使用带有 Inertia JS 的 Laravel Breeze。我正在使用 "yaminncco / vue-sidebar-menu package" 作为侧边栏。

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

那么，如果有人有想法或者可以建议在使用 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>

如果您想根据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
         })
      }
   }
}