如何在 SPA 中处理角色/权限（Laravel+Vue）

Posted 2023-02-22

【中文标题】如何在 SPA 中处理角色/权限（Laravel+Vue）

【英文标题】：How to handle roles/permissions in an SPA (Laravel+Vue)

【发布时间】：2019-01-03 05:27:50

【问题描述】：

我听到了很多关于 SPA 的讨论，所以我想让我们试一试，于是我开始使用 Laravel+Vue 开展一个 SPA 项目。

我开始在 axios 和 vue-router 的帮助下制作一些 CRUD。一切都很顺利，直到我需要授权用户并根据他们的角色做出决定。我意识到现在我没有服务器端渲染（刀片指令）的优势，我必须在 vue 端工作来管理角色/权限等。但我不知道我该如何处理。 .. 最佳做法是什么... 是否有任何需要注意的问题... 等等等等。

所以我开始了我的研究，我从here、there 和there 收集到的信息是，我必须将数据存储在 JS 对象或 localStorage 中才能执行以下操作：

<p v-if="Laravel.user.role == 'admin'"> Confidential Data </p>

<p v-else> Unimportant Information </p>

但是如果实际上不是管理员而是版主的用户在控制台中执行了这个Laravel.user.role.push('admin') 怎么办？那些敏感数据不会暴露给他吗？

localStorage 也可用：localStorage.getItem('user.role')

那么处理这种情况的安全/标准/最常见的方法是什么？

【问题讨论】：

在服务器端验证权限，只返回授权数据。

@emix 假设我有 3 个选项卡：主页、配置文件、操作，并且我希望操作选项卡仅对授权用户可见，如何才能在服务器端验证一个选项卡，因为我有已经渲染了所有的标签？

@Eisenheim 问题是<p v-if="Laravel.user.role == 'admin'"> Confidential Data </p> 将被编译成javascript，因此每个用户只要努力就可以看到它，您应该在获取来自 api 端点的“机密数据”只有管理员可以访问

好的，我明白你的意思了。但是只发送授权数据将是一场噩梦。你能用我之前提到的“标签类比”来指导我吗？如果你被要求隐藏一个选项卡项或菜单项，你会如何隐藏它？

@Tanmay 什么最终最适合你？

【参考方案1】：

我认为最好的方法是在 Vuex 中存储数据，如果你使用 store 或者你可以使用原型并使用 Vue.prototype.$userPerms = axios.get() 并且你将能够在每个组件中使用 this.$userPerms .

但保护数据的最佳方式是 API 无法返回用户无法看到的数据。因此，如果有人以某种方式破解他的角色。他仍然看不到数据，因为 API 没有返回数据。

【参考方案2】：

在 Laravel 中控制数据访问，然后在前端使用 @casl 执行一些额外的基于权限的逻辑。

npm install @casl/vue @casl/ability

包：

https://www.npmjs.com/package/@casl/vue

https://www.npmjs.com/package/@casl/ability

示例应用：

https://github.com/stalniy/casl-vue-api-example

教程：

https://vuejsdevelopers.com/2018/01/08/vue-js-roles-permissions-casl/