如何在 Vue 模板中使用“hasPermissionTo”

Question

我被我的代码卡住了，我不知道如何在 vue 模板中使用 hasPermissionTo 来检查角色是否有权做某事。

<script setup>
import { Link } from "@inertiajs/inertia-vue3"
import { defineProps } from "vue";

const props = defineProps({
    is_admin: Boolean,
    role: Object,
});
</script>

它的回报：

如果角色有权索引该选项卡，现在我想签入我的导航链接？

<Link  class="flex items-center mt-4 py-2 px-6 bg-gray-700 bg-opacity-25 text-gray-100" :href="route('admin.index')" >
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
    </svg>
    <span class="mx-3">Dashboard</span>
</Link>

如何使用v-if检查角色是否有权显示仪表板链接？

Answer 1

有不同的方法可以实现你想要的。 这就是我要做的：

在HandleInertiaRequests 中间件中，我将添加经过身份验证的用户角色：

public function share(Request $request)
{
    // I have hardcoded it, but you should get it from db instead (Auth::user()->roles etc)
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => [
                'name' => 'your user name',
                'roles' => [
                    'admin'
                ]
            ]
        ]
    ]);
}

然后，在您的一个 Vue 组件中，您可以检查此共享道具（我使用Vue3 组合 API为例，将其调整为您的版本）：

<template>
  {{ $page.props.auth.user.roles[0] }}
</template>

或者

<script setup>
  import { usePage } from '@inertiajs/inertia-vue3'

  const userRoles = usePage().props.value.auth.user.roles
</script>