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

Posted 2023-02-22

【中文标题】在 Vue JS 和 Laravel 5.1 + Entrust 中检查特定角色的权限

【英文标题】：Check particular role's permission in Vue JS and Laravel 5.1 + Entrust

【发布时间】：2016-10-22 13:08:25

【问题描述】：

我在 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();
    

我唯一坚持的就是如果角色具有特定权限，则选中复选框。

如果它在 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() 方法？

【问题讨论】：

你是在使用组件还是这是一个单一的 vue 实例？

嘿贾斯汀，这是在单个 vue 实例中。

【参考方案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。希望这可以帮助！