5

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>

出力は次のようになります: 出力 のスクリーンショット

アクセス許可は、次の方法でも正常に割り当てられます。

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() メソッドを使用するにはどうすればよいですか?

4

1 に答える 1

1

私は同じ問題を抱えており、しばらく答えを探した後、VueJS のドキュメント以外を探すことにしました。具体的には、チェックボックスに関するこの部分。

そのため、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を使用して、クリックされた Role の値をマッピングしています。

<script>
...

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

...
</script>

私は先に進み、 JSFiddle で例を作成しました。お役に立てれば！

于 2016-10-23T20:39:54.970 に答える