Question

我一直听到很多关于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')

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

Answer 1

我认为最好的方法是在商店中存储数据，或者使用原型并使用Vue.prototype。$ userPerms = axios.get（），则可以在每个组件中使用它。$ userPerms

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

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

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

2 个答案: