Laravel Inertia传递给Vue视图的can属性为undefined问题排查

1. 检查Inertia共享数据配置 #

确认是否在AppServiceProvider的boot方法中正确共享权限检查逻辑，避免未登录时调用can方法报错：

use Inertia\Inertia;

public function boot()
{
    Inertia::share([
        'can' => fn () => [
            'createRole' => auth()->user()?->can('create roles'),
            'editRole' => auth()->user()?->can('edit roles'),
            'deleteRole' => auth()->user()?->can('delete roles'),
            // 按需添加其他权限
        ],
    ]);
}

2. 验证Controller数据传递 #

如果是在RoleController的index方法单独传递can属性，要确认语法和权限字符串的准确性：

public function index()
{
    return Inertia::render('Roles/Index', [
        'roles' => Role::all(),
        'can' => [
            'createRole' => auth()->user()?->can('create roles'),
            'editRole' => auth()->user()?->can('edit roles'),
            'deleteRole' => auth()->user()?->can('delete roles'),
        ],
    ]);
}

注意权限字符串（如create roles）必须和laravel-permission中定义的完全一致，键名要和Vue中引用的保持统一。

3. 检查Vue组件接收逻辑 #

在Vue组件中必须通过props声明接收can属性：

• 组合式API写法：

<script setup>
import { defineProps } from 'vue';

const { roles, can } = defineProps({
    roles: {
        type: Array,
        required: true,
    },
    can: {
        type: Object,
        required: true,
    },
});
</script>

• Options API写法：

<script>
export default {
    props: {
        roles: Array,
        can: Object,
    },
}
</script>

引用时要使用正确的变量名，比如can.createRole，避免拼写错误。

4. 确认用户权限分配 #

在Controller中临时打印权限检查结果，验证用户是否真的拥有对应权限：

dd(auth()->user()->can('create roles'));

如果返回false或null，说明权限分配有问题，需要检查laravel-permission是否给用户/角色正确添加了目标权限。

5. 调试Inertia响应数据 #

打开浏览器开发者工具的Network标签，找到Inertia的XHR请求，查看响应的props部分：

• 如果响应中没有can字段，说明后端未正确传递数据；
• 如果响应中有can但Vue显示undefined，说明组件接收逻辑有误。

内容的提问来源于stack exchange，提问作者Ubaldo Villaba