我如何使用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或您可以创建自己的权限...我不建议您这样做，因为我不知道您正在做什么的困难。