VueJs에서의 Larabel 게이트/허가 사용

VueJs에서의 Larabel 게이트/허가 사용

이전에 이 문제를 어떻게 해결했는지 잘 모르겠습니다만, VueJs를 사용하고 Vue 템플릿에서 작업을 승인하려면 어떻게 해야 합니다.

(라라벨 사용).@can지침) 하지만 Google에서 몇 시간 동안 검색한 후 Vue에서 이 작업을 수행할 문서나 방법이 없습니다.

뷰내의 어레이/JSON 오브젝트에 유저 권한을 간단하게 로드할 수 있습니다만, Laravel의 게이트 메서드를 사용해 Vue 템플릿의 액션을 표시하거나 숨길 수 있는 방법은 없는 것 같습니다.

예를 들어, 댓글 목록이 있지만 '편집' 버튼을 보려면 사용자가 댓글을 소유해야 합니다.

Vue에서 로직을 구현하면 백엔드와 프런트엔드에 걸쳐 인증 로직을 복제하게 됩니다.

Laravel의 정책을 사용하여 특정 작업에 대한 복잡한 권한을 수행할 수 있습니다.그러나 나는 Vue에서 어떻게 그 정책을 이행해야 할지 막막하다.

더시나리오가 , 사용자가 중인 입니다. 예예들 、 용용로로, 、admin역할은 댓글을 참조하는 것입니다.댓글을 소유하지 않아도 편집할 수 있어야 합니다.

이런 시나리오에 대해 제안해 주실 분?

편집:

이제 Atribute Accessor를 모델에 추가할 수 있습니다.다음은 예를 제시하겠습니다.

모델:

class Comment extends Model
{
    protected $appends = ['can_update'];

    public function getCanUpdateAttribute()
    {
        return Gate::allows('update', $this);
    }
}

Vue:

<button v-if="comment.can_update">Edit</button>

하지만 이것은 내가 내 정책 안에 이미 존재하는 논리를 다시 복제하는 것처럼 보인다.

결국 라라벨의 자원을 이용해서 이 일을 해냈죠

들어 보겠습니다.can( ( ) :

class Ticket extends Resource
{
    /**
     * The "data" wrapper that should be applied.
     *
     * @var string
     */
    public static $wrap = 'ticket';

    /**
     * Transform the resource into an array.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'answer_id' => $this->answer_id,
            'summary' => $this->summary,
            'description' => $this->description,
            'creator' => $this->creator,
            'created_at' => $this->created_at,
            'updated_at' => $this->updated_at,
            'reported_at' => $this->reported_at,
            'closed_at' => $this->closed_at,
            'closed' => $this->closed,
            'answered' => $this->answered,
            'can' => $this->permissions(),
        ];
    }

    /**
     * Returns the permissions of the resource.
     *
     * @return array
     */
    protected function permissions()
    {
        return [
            'update' => Gate::allows('update', $this->resource),
            'delete' => Gate::allows('delete', $this->resource),
            'open' => Gate::allows('open', $this->resource),
        ];
    }
}

이를 통해 프런트엔드의 실제 허용 로직을 복제하는 것이 아니라 Vue 템플릿의 단순한 부울 로직을 사용하여 프런트엔드의 액세스를 제어할 수 있었습니다.

<router-link v-if="ticket.can.update" :to="{name:'tickets.edit', params: {ticketId: ticket.id}}" class="btn btn-sm btn-secondary">
    <i class="fa fa-edit"></i> Edit
</router-link>

또한 사용자가 리소스를 생성할 수 있는 경우 권한을 적용하기 위해 Larabel 리소스 컬렉션을 사용했습니다.

class TicketCollection extends ResourceCollection
{
    /**
     * The "data" wrapper that should be applied.
     *
     * @var string
     */
    public static $wrap = 'tickets';

    /**
     * Get any additional data that should be returned with the resource array.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return array
     */
    public function with($request)
    {
        return [
            'can' => [
                'create' => Gate::allows('create', Ticket::class),
            ],
        ];
    }
}

다음으로 API 컨트롤러에서 다음을 수행합니다.

public function index()
{
    $tickets = Ticket::paginate(25);

    return new TicketCollection($tickets);
}

public function show(Ticket $ticket)
{
    $ticket->load('media');

    return new TicketResource($ticket);
}

이를 통해 현재 인증된 사용자가 목록에 있는 리소스를 생성할 수 있는지 여부를 확인할 수 있습니다. 검증할 실제 리소스가 없기 때문에 반환된 컬렉션에 대해서만 이 작업을 수행할 수 있습니다.

이 패턴을 구현하는 것은 Vue 앱 전체에 실제 인증 로직을 복제하지 않고, 블레이드를 사용하여 컴포넌트에 개별적으로 권한을 주입하지 않고 인증을 관리하는 가장 간단한 방법이라고 생각했습니다.

사용 권한을 컴포넌트에 주입하면 결국 사용 권한이 필요한 중첩된 컴포넌트가 있는 경우 문제가 발생합니다.그러면 하위 컴포넌트 사용 권한을 부모에게 넘겨야 유효성을 확인할 수 있기 때문입니다.

중첩된 사용 권한의 경우 CAN 사용 권한 어레이를 포함하는 관계에 대해 상위 리소스에서 하위 리소스를 반환할 수 있으므로 Vue를 사용하여 이러한 리소스를 쉽게 루프하고 이러한 리소스에 대한 사용자 액세스를 결정하는 간단한 논리를 사용할 수도 있습니다.

이 접근방식은 또한 도움이 되었습니다.따라서 자주 변경되지 않는 리소스에서 서버 측을 통해 각 사용자의 권한을 캐시할 수 있었습니다.

현시점에서는 백엔드의 코드를 프런트엔드에 복제하지 않고는 이를 실현할 수 없습니다.

이번 Fullstack Radio(17:15) 편에서 제프리 웨이(Jeffrey Way)와 애덤 워던(Adam Wathan)은 정확히 그 점에 대해 이야기했다.그들은 저와 같은 의견을 가지고 있고, 현재 그들은 당신과 같은 일을 하고 있습니다.

또, 다음과 같은 소품을 사용하는 것에 대해서도 이야기했습니다.

<post-component :can-update="{{ $user->can('update', $post) }}"></post-component>

이 답변이 도움이 되길 바랍니다.

프로젝트 중 하나에서 권한은 문자열(예: 'post.read', 'post')로 저장됩니다.이러한 권한은 로그인 시 프런트 엔드로 전달됩니다.

작고 간단한 플러그인 Vue Quick ACL을 구축했습니다.이러한 플러그인은 기능을 추상화하고 사용자와 사용자 권한을 변경할 때의 반응을 관리합니다.

// UserResource

return [
 'name' => $this->name,
 'permissions' => $this->permissions
];

그런 다음 프런트엔드에서 해당 권한을 사용자와 함께 저장할 수 있습니다.

// Login.vue

export default {
  methods: {
    login() {
      Api.login()
        then(({data}) => {
          this.$setUserPermissions(data.permissions)
        })
    }
  }
}

// Component.vue

<template>
  <button v-if="$can('post.delete')">Delete</button>
</template>

언급URL : https://stackoverflow.com/questions/45868924/using-laravels-gate-authorization-in-vuejs