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

Question

嗨，我正在使用带有 Inertia JS 的 Laravel Breeze。我正在为侧边栏使用“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
   ]);
}

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

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

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

如果您在非页面组件的 Vue 组件上使用侧边栏组件，例如，在布局组件中，您将从以下位置计算 prop $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
         })
      }
   }
}