具有Laravel权限的Vue.js

Question

我正在将Laravel Permission API与Vue.JS前端集成。我正在使用https://github.com/spatie/laravel-permission库获取Laravel权限。我不明白如何在Vue JS前端中检查权限（在Laravel刀片中，我使用@Can来检查权限）。

Answer 1

我确实在做同样的事情。我正在考虑添加一个自定义 Vue 指令来检查 Laravel.permissions 数组。

它甚至可能像

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

我还没有测试过这段代码。只是在这里集思广益。

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

我可以这样持有权限：

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

Answer 2

我将执行ajax调用来检查权限，类似这样，但是您需要修改它以满足您的需求。

路线：

Route::get('/permission/{permissionName}', 'PermissionController@check');

控制器：

function check($permissionName) {
   if (! Auth::user()->hasPermissionTo($permissionName)) {
        abort(403);
   }
   return response('', 204);
}

Vue ：（如果您想同步执行此操作），这是一个简单示例（Vue全局混合），您可以将其转换为Vue指令或组件。

Vue.mixin("can", (permissionName) => {
    let hasAccess;
    axios.get(`/permission/${permissionName}`)
        .then(()=> {
            hasAccess = true;
        }
        .catch(()=> {
            hasAccess = false;
        };
    return hasAccess;
});

然后，每次您想要检查权限时，您都可以

<el-input v-if="can('write-stuff')"> </el-input>