Verify specific role resolution in Vue JS and Laravel 5.1 + Entrust

Question

I am using Zizaco / entrust in Laravel 5.1. I want to explicitly grant permissions for a specific role using checkboxes. This is my code:

Extraction of roles:

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

Obtaining access rights:

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

Here is a table for assigning roles and permissions:

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

The output is as follows: Screenshot of the results

Permissions are also successfully assigned in the following way:

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

The only thing I'm stuck with is to make the checkboxes checked if the role has a specific permission.

I could do the following if it was in a php object:

  @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 

How can I use the hasPermission () method in Vue JS?

Answer 1

I had the same problem, and after a while I really looked for answers, I decided to look no further than the VueJS documentation. In particular, this part is about flags .

So it seems that vue stores the value of each flag in the 'checkedNames' array, which is bound to all cells. Since we have several permissions and roles with assigned permissions, we can substantially create the same effect.

Here is a very simple example of what I did with mine.

In my template, I have a shared view of roles and permissions:

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

Since the checkboxes are tied to the currentPerms array, we can update this array either by checking the boxes, or by setting the value, as it responds.

In this case, I use lodash to match the values ​​of the role that the button was clicked on.

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

I went ahead and made an example on JSFiddle . Hope this helps!