具有Laravel权限的Vue.js

Question

我正在将Laravel权限API与Vue.JS前端进行集成。我正在使用https://github.com/spatie/laravel-permission库来获得Laravel权限。我不明白如何在Vue JS前端检查权限(在Laravel blade中，我使用@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全局混合)，你可以把它变成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

我也在做同样的事情。我正在考虑添加一个可以检查Laravel.permissions数组的custom Vue directive。

它甚至可能像下面这样简单

 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. 在用户模型上添加访问者空间/laravel-权限正在使用

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

全局页或布局页上的

1. 将权限从访问者传递到javascript。

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

在resources/js/app.js上创建

1. 全局指令

    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的权限数组上。如果找到，它将隐藏元素else show，这个函数就像一个v-if。

1. 在您的组件上这样使用它- "add_items“是您的权限

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

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