Проверить разрешение конкретной роли в Vue JS и Laravel 5.1 + Entrust

Question

Я использую Zizaco/entrust в Laravel 5.1. Я хочу явно предоставить разрешения для конкретной роли, используя флажки. Это мой код:

Fetching Роли:

fetchRoles: function(){ 
     this.$http.get('api/role',function(data){ 
      this.$set('roles',data); 
     }); 
    } 

Извлечение разрешений:

fetchPermissions: function(){ 
      this.$http.get('api/permission',function(data){ 
       this.$set('permissions',data); 
      }); 
     } 

Вот таблица для назначения ролей и разрешений:

<table class="table table-bordered table-responsive"> 
    <thead>               
     <th>Permissions/Roles</th> 
     <th v-for="role in roles"> 
      @{{ role.display_name }} 
     </th> 
    </thead> 
    <tbody> 
     <tr v-for="permission in permissions"> 
      <td>@{{ permission.display_name }}</td> 
      <td v-for="role in roles"> 
       <input type="checkbox" value="@{{ permission.id }}" name="roles[@{{ role.id }}][permissions][]"> 
      </td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td> 
       <button type="submit" class="btn btn-primary">Alter Permission</button> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

Выход как : Screenshot of Output

Разрешения также успешно назначаются следующим способом:

public function changePermission(Request $request){ 
     $input = $request->all(); 
     $roles = Role::all(); 

     foreach($roles as $role) 
     { 
      $permissions_sync = isset($input['roles'][$role->id])? $input['roles'][$role->id]['permissions'] : []; 
      $role->perms()->sync($permissions_sync); 
     } 
     Flash::success('Successfully modified permissions!'); 
     return redirect()->back(); 
    } 

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

я мог бы сделать следующее, если он был в объект PHP:

@if(count($permissions)>0) 
    @foreach($permissions as $permission) 
    <tr> 
    <td>{{$permission->display_name}}</td> 
     @if(count($roles)>0)               
      @foreach($roles as $role) 
      <td><input type="checkbox" value="{{$permission->id}}" name="roles[{{$role->id}}][permissions][]" @if($role->hasPermission($permission->name)) checked="checked" @endif></td>@endforeach @endif </tr> @endforeach @endif 

Как я могу использовать метод hasPermission() в Vue JS?

Answer 1

У меня была такая же проблема, и через некоторое время я действительно искал ответы, я решил посмотреть не дальше, чем документация VueJS. В частности, this part about checkboxes.

Таким образом, vue сохраняет значение каждого флажка в массиве 'checkedNames', который привязан ко всем окнам. Поскольку у нас есть несколько разрешений и роли с назначенными разрешениями, мы можем существенно создать тот же эффект.

Вот очень простой пример того, что я сделал с моим.

В моем шаблоне, у меня раздвоение зрения ролей и разрешений:

<div class="roles"> 
    <div v-for="role in roles"> 
     <a v-on:click="update(role)">{{ role.name }}</a> 
    </div> 
</div> 

<div class="perms"> 
    <div v-for="perm in permissions"> 
     <input type="checkbox" 
      v-model="currentPerms" 
      v-bind:id="perm.id" 
      v-bind:value="perm.name"> {{perm.display_name}} {{perm.name}} 
    </div> 
</div> 

Поскольку флажки связаны с массиву 'currentPerms, мы можем обновлять этот массив или через флажки или путем установки значение, так как оно реактивное.

В этом случае я использую lodash для сопоставления значений роли, на которую была нажата кнопка.

<script> 
... 

update: function(role) { 
    this.currentPerms = _.map(role.perms, permission => { 
     return permission.name; 
    }); 
} 

... 
</script> 

Я пошел дальше и сделал example on JSFiddle. Надеюсь это поможет!