Vue 组件内的 Laravel's Gate 授权

Question

使用拉拉维尔之门/授权。我可以通过简单地在我的刀片模板中使用它。

@can('edit-post')
<button></button>
@endcan

但是，如果按钮在 vue 组件中，我该如何应用@can来授权用户呢？

Answer 1

将您的权限从 laravel 加载到全局 JavaScript 变量，或者您可以使用 ajax 调用加载它

window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
'userId' => Auth::user()->id,
'permissions' => Auth::user()->permissions()->pluck('name')->toArray()
]); ?>

然后创建一个 vue 指令

Vue.directive('can', function (el, binding) {
return Laravel.permissions.indexOf(binding) !== -1;
})

现在将其应用于您的按钮

<button v-can="editStuff">You can edit this thing</button>

你可以在这里看 https://laracasts.com/discuss/channels/vue/roles-and-permissions-in-vue

Answer 2

使用 vue inline-template。可以容纳刀片特征。