Vue SPA 中的角色和权限答案

【问题标题】：Role and Permission in Vue SPAVue SPA 中的角色和权限
【发布时间】：2021-07-17 06:41:30
【问题描述】：

我有两个独立的项目。一个是 Laravel for RESTful API，另一个是 Vue SPA。

如果前端也由 Laravel 处理，那么处理角色和权限很容易，因为我们可以使用 Spatie Permission 提供的 can() 和 hasRole() 方法。

但是，我们不能直接从后端访问 Vue SPA 中的这个值。

有什么方法可以控制 Vue SPA 中的权限？

谢谢

【问题讨论】：

【解决方案1】：

是的，您可以在成功登录后向客户端发送用户的数据以及他的角色和权限，并创建一个名为 Can 的 Vue 组件，例如，如果用户具有该角色，则仅显示一些内容或允许这样做。

<can permission="post.delete">
  <v-btn>Delete record</v-btn>
<can>

Can 组件访问用户数据（包括他的角色和权限）并检查用户是否有能力查看底层内容。

【讨论】：

如何控制与 laravel 后端的同步。我的意思是如果管理员在用户注销之前更改了经过身份验证的用户的某些权限怎么办？感谢您的帮助。
您可以使用 websockets（广播）或称为 stale-while-revalidate 的方法来保持用户数据同步。对于 Vue.js，有一个名为 vswr 的库可以帮助您实现这一目标。