Verifica il permesso del ruolo particolare in Vue JS e Laravel 5.1 + Entrust

Question

Sto utilizzando Zizaco/entrust in Laravel 5.1. Voglio dare esplicitamente le autorizzazioni a un ruolo particolare usando le checkbox. Questo è il mio codice:

Ruoli Recuperare:

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

Recuperare Permessi:

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

Ecco la tabella per l'assegnazione di ruoli e autorizzazioni:

<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> 

L'uscita è come : Screenshot of Output

Le autorizzazioni vengono anche assegnati con successo dal seguente metodo:

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(); 
    } 

unica cosa che mi stucked in sta facendo le caselle selezionate controllato se il ruolo ha una particolare autorizzazione.

ho potuto effettuare le seguenti operazioni se fosse in oggetto 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 

Come posso utilizzare il metodo hasPermission() in Vue JS?

Answer 1

Ho avuto lo stesso problema e dopo un po 'di ricerca effettiva di risposte, ho deciso di non guardare oltre la documentazione di VueJS. Specificamente this part about checkboxes.

Quindi sembra che vue memorizzi il valore di ogni checkbox nella matrice 'checkedNames', che è associata a tutte le caselle di controllo. Dal momento che abbiamo più permessi e ruoli con queste autorizzazioni assegnate, possiamo essenzialmente creare lo stesso effetto.

Ecco un esempio molto semplice di ciò che ho fatto con il mio.

Nel mio modello, ho una vista combinata di ruoli e autorizzazioni:

<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> 

Dal momento che le caselle di controllo sono tenuti a matrice il 'currentPerms', siamo in grado di aggiornare tale matrice sia attraverso il controllo delle scatole o impostando il valore, dal momento che è reattivo.

In questo caso sto utilizzando lodash per mappare i valori del ruolo su cui è stato fatto clic.

<script> 
... 

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

... 
</script> 

Sono andato avanti e ho fatto un example on JSFiddle. Spero che questo ti aiuti!