如何处理SPA中的角色/权限(Laravel + Vue)

Tan*_*may 5 javascript laravel single-page-application vue.js laravel-authorization

我一直听到很多关于SPA的嗡嗡声,所以我想让我们试一试,我开始与Laravel + Vue一起开展SPA项目.

我开始在axios和vue-router的帮助下制作一些CRUD.一切都很顺利,直到我需要授权用户并根据他们的角色做出决定.我意识到,既然我没有服务器端渲染(刀片指令)的优势,我将不得不在vue方面管理角色/权限等.但我不知道如何处理它. ..什么是最佳实践......是否有任何问题需要注意......等等.

于是,我开始了我的研究,我从聚集在这里,那里,而且那里的是,我将不得不在一个JS对象或localStorage的数据存储,以这样的演出的内容:

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

<p v-else> Unimportant Information </p>
Run Code Online (Sandbox Code Playgroud)

但是,如果实际上不是管理员但是主持人的用户Laravel.user.role.push('admin')在控制台中执行此操作呢?这些敏感数据不会暴露给他吗?

localStorage也可以使用: localStorage.getItem('user.role')

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

小智 1

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

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