Vue.js с разрешением Laravel

Question

Я нахожусь в процессе интеграции Laravel Permission API с интерфейсом Vue.JS. Я использую библиотеку https://github.com/spatie/laravel-permission для Laravel Permission. Я не понимаю, как я могу проверить разрешение в интерфейсе 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), вы можете превратить его в директиву 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

Просто наткнулся на эту проблему, и я хотел бы поделиться тем, что я нашел и реализовал.

1. Добавить аксессор в модели User, которую использует разрешение spatie / laravel

    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. Создать глобальную директиву для ресурсов / 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>

Это решение от до , но вместо миксина я использую директиву. Получил идею директивы из комментария @Ismoil Shifoev выше.

Answer 3

Я буквально работаю над тем же самым.Я думаю о добавлении пользовательской директивы 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()
            ]); ?>