如何使用Laravel策略类中的逻辑来保护vue路由器路由？

Question

我的应用程序包含一个使用Laravel构建的API，以及一个使用Vue.js和Vue Router的前端SPA。

我在Laravel中编写了一个策略类，该类具有确定用户是否能够创建/读取/更新/删除资源的逻辑。执行这些操作的页面是Vue Router路由，并按照正常的url方案在我的route.js文件中定义：

GET  /tasks (all tasks)
GET  /tasks/:task (show task)
GET  /tasks/create (create task)
GET  /tasks/:task/edit (edit task)
...

以编辑任务路线为例：如果用户没有编辑任务的权限，我想使用Vue Router导航防护来重定向用户。该逻辑在我的API策略类中定义如下：

// App\Policies\TaskPolicy

public function update(User $user, Task $task)
{
    return $user->hasRole('foo') && ($task->owner === $user->id);
}

如何在Vue路由器路由文件中使用TaskPolicy逻辑并检查用户是否能够编辑任务而不在Vue.js中复制任务？

Answer 1

我建议在Vue.JS首次启动/加载时调用初始端点。该端点应包括用户拥有的权限列表。这些权限应定义用户可以在FE上看到的内容。

关于诸如更新之类的权限，如果权限之一存在于初始端点中，则可以将其称为task.update，然后Vue.JS将知道已登录的用户可以更新任务。

此外，如果用户出于任何原因调用了端点，则由于您创建了Policy，您的Laravel App应该以403代码响应。

权限管理插件示例：Spatie Permission或您可以创建自己的权限...这取决于软件的难度

---

更新

如果您要列出列表端点中的所有任务，那么不属于已登录用户的任务，则可以始终向Task模型添加一个额外属性，该属性将指示已登录用户是否可以更新任务。此属性可以称为editable，并且是布尔值。如果editable为false，则Vue.JS知道不显示编辑按钮，等等。