在vue组件中的Laravel的Gate授权

Question

使用Laravel的登机门/授权。我只需做一下就可以在刀片模板中使用它。

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

但是，如果按钮位于vue组件内部，该如何应用@can来授权用户呢？

Answer 1

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

UNION

然后创建一个vue指令

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

现在将其应用于您的按钮

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

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

Answer 2

使用vue内联模板。可以保留刀片功能。