vue 组件中的 Laravel 门授权

Posted 2023-02-22

【中文标题】vue 组件中的 Laravel 门授权

【英文标题】：Laravel's Gate Authorization inside a vue component

【发布时间】：2019-01-29 08:19:49

【问题描述】：

使用 Laravel 的门/授权。我可以通过简单地在我的刀片模板中使用它..

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

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

【问题讨论】：

使用ajax获取用户从laravel到vue的权限。

您能举个例子吗？

请check this and try

为什么不能使用vue内联模板

【参考方案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

【参考方案2】：

使用 vue 内联模板。可以容纳刀片功能..