在Vue JS和Laravel 5.1中檢查特定角色的權限+ Entrust

Question

我在Laravel 5.1中使用Zizaco/entrust。我想通過使用複選框明確授予特定角色的權限。這是我的代碼：

抓取角色：

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 

我怎樣才能在Vue公司JS使用調用hasPermission（）方法？

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。希望這可以幫助！