Vue.js与Laravel许可

Question

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

Answer 1

我会做一个ajax调用来检查权限，比如这样，但当然你需要修改它来满足你的需求。

路线：

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

控制器：

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

Vue :(如果你想同步这样做），这是一个简单的例子（Vue global mixin），你可以把它变成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>

Answer 2

我真的在做同样的事情。我正在考虑添加一个custom Vue directive来检查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 3

只是偶然发现了这个问题，我想分享我发现和实施的内容。

1. 在spatie / laravel-permission使用的User模型上添加一个访问器

    public function getAllPermissionsAttribute() {
       $permissions = [];
         foreach (Permission::all() as $permission) {
           if (Auth::user()->can($permission->name)) {
             $permissions[] = $permission->name;
           }
         }
       return $permissions;
    }

2. 在您的全局页面或布局页面上，将访问者的权限传递给javascript。

    <script type="text/javascript">
       @auth
          window.Permissions = {!! json_encode(Auth::user()->allPermissions, true) !!};
       @else
          window.Permissions = [];
       @endauth
    </script>

3. 在resources / js / app.js上创建一个全局指令

    Vue.directive('can', function (el, binding, vnode) {

        if(Permissions.indexOf(binding.value) !== -1){
           return vnode.elm.hidden = false;
        }else{
           return vnode.elm.hidden = true;
        }
    })

在这里，您要检查您在指令上提供的权限是否来自laravel的权限数组。如果找到那么它将隐藏其他元素显示，这个函数就像一个v-if。

4. 在您的组件上使用它 - “add_items”是您的权限

    <button type="button" v-can="'add_items'"></button>

这个解决方案来自this但不是mixin，而是使用指令。从上面的@Ismoil Shifoev评论中得到了指令的想法。