laravel - 在 VueJs 中使用 Laravel 的 Gate/Authorization

Question

我不确定以前是如何处理这个问题的，但是我该如何使用 VueJs 并在 Vue 模板中授权操作？

如果我使用的是 Laravel 的 Blade ，这很容易(使用 @can 指令)，但是在 Google 上搜索了几个小时后，没有任何文档或任何方法可以在 Vue 中执行此操作。

现在，我知道我可以简单地将用户权限加载到 View 内的数组/JSON 对象中，但似乎无法使用 Laravel 的门方法在 Vue 模板中显示/隐藏操作以确定是否允许用户对特定记录执行操作。

例如，有一个评论列表，但用户必须拥有评论才能看到“编辑”按钮。

问题是，如果我在 Vue 中实现逻辑，我将为此在整个后端和前端复制授权逻辑。

使用 Laravel 的策略，我能够执行特定操作的复杂授权。但我对如何在 Vue 中实现该政策感到困惑。

还有更复杂的场景，例如如果具有 admin 角色的用户正在浏览评论，即使他们不拥有评论，他们也应该能够编辑评论。

有人对这种情况有什么建议吗？

编辑:

现在我可以向我的模型添加一个属性访问器，例如:

型号:

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

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

View :

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

但这似乎又是在重复我的策略中已经存在的逻辑。

Answer 1

我最终使用了 Laravel resources来完成这个。

这是一个示例(注意 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 模板中使用简单的 bool 逻辑来控制前端的访问，而不是在前端复制实际的权限逻辑:

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

此外，如果用户能够创建资源，我使用 Laravel 资源集合 来应用权限:

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 Controller 中:

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

    return new TicketCollection($tickets);
}

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

    return new TicketResource($ticket);
}

这允许我验证当前经过身份验证的用户是否有权创建正在列出的资源，因为我们没有要验证的实际资源，我们可以在返回的集合上执行此操作，因为它完全与之相关。

在我看来，实现此模式是管理授权的最简单方法，无需在我的 Vue 应用程序中复制实际的授权逻辑，也无需使用 blade 将权限单独注入(inject)组件。

如果您的嵌套组件也需要权限，那么向组件注入(inject)权限最终会导致我遇到问题，因为这样您就需要将子组件权限传递给父组件才能验证它们。

对于嵌套权限，您可以从父资源返回子资源以获得还包含 can 权限数组的关系，因此您可以使用 Vue 轻松地遍历这些资源并使用简单的逻辑来确定用户也可以访问这些内容。

这种方法也很有用，因此我可以通过服务器端在不经常更改的资源上缓存每个用户的权限。