基于Vue.js开发的应用程序如何管理用户权限?

原创 manguo 译文 vue 432阅读 2018-04-09 12:04:15 举报

在前端应用程序的认证过程中,我们常常想根据自己的角色指派来做些改变,使得一些内容是用户可见,另外一些不可见。例如,guest用户可以看到一个帖子,但只有注册用户或管理员才可以看到一个按钮来编辑该邮件。

在前端应用程序中权限管理可能十分的凌乱。你可能以前也写过这样的代码:

作为替代,有一个整洁的小类库CASL可以非常简单的帮助你来管理用户权限。一旦你用CASL定义了你的权限管理,并且激活的一个用户,你就可以把上述的例子改变成这样:

在这篇文章中,我将演示如何在一个基于Vue.js和CASL的前端应用程序中管理权限。

基于Vue.js开发的应用程序如何管理用户权限?

CASL语言快速入门

它允许您定义一组规则,可以限制资源到给定的用户,即确定是否允许他们访问这些资源。

例如,使用规则可以是用户可以在一个给定的资源或实体(例如,一个帖子,评论,文章等)进行CRUD操作(创建、读取、更新和删除)。

假设我们有一个分类广告网站,有简单的“销售”职位。这个应用程序的一套显而易见的规则是:

guest用户可以查看任何帖子。

管理用户可以查看任何帖子,并可以更新或删除一个帖子。

在CASL,我们使用AbilityBuilder来定义规则。一个新规则是用一个可以调用的方法来创建的,例如:

现在你可以根据你定义的规则检查你的应用程序,例如:

你可以找到更多关于CASL的官方文档(https://stalniy.github.io/casl/)。

演示项目

作为演示,我制作了一个简单的服务器/客户端应用程序,其中显示了分类广告帖子。此应用程序的权限规则是:用户可以阅读任何文章或创建新的帖子,但只能更新或删除由他们自己创建的职位的帖子。

我用vue.js与CASL使这些规则易于实现并可以支持一定规模的访问,以防未来增加其他实体或操作。

现在我将介绍这个应用程序的设置步骤。如果你想看到完整的代码,那么你可以访问一下这个GitHub的repo看看(https://github.com/anthonygore/vue-casl-demo)。

定义用户权限

让我们在resources/ability.js文件中定义我们的用户权限。关于CASL的一个很酷的事情是,它与环境无关的,这意味着它可以用在Node或任何浏览器中。

我们要使我们的权限定义在CommonJS的模块中以确保与Node的兼容性(注意WebPack可以变换模块中使用的客户端)。

让我们把代码细分一点:

我们可以看到第一个函数调用的方法中有二个参数,我们通过这个调用就可以定义权限规则。这种方法的第一个参数是你需要的CRUD操作,第二个是Post。

注意,在第二个函数调用中,我们传递了第三个参数是一个对象。这用于检测实体的用户属性是否匹配我们提供的用户对象。如果我们没有这样做,任何帖子就都可以被任何用户更新或删除,而不仅仅是帖子的所有者。

当CASL检查确定一个实体的权限时,它需要知道实体的类型。通常的一种方法是通过函数的属性subjectname作为定义方法的一个参数来传递一个对象。这个函数将返回实体的类型。

我们将通过返回实体上的type属性来实现这一点。我们需要确保当我们在某一个时刻定义我们的Post对象时,这个属性是存在的。

最后,我们在一个函数中封装我们的定义,这个函数允许我们在检测权限时传递用户对象。这样当我们在主应用程序中使用它时,就更好理解了,如下所示。

在Vue中使用访问权限规则

我们现在希望能够检测一个对象在我们的前端应用程序看到的CRUD操作允许用户执行它。我们需要我们的Vue组件内提供的使用规则。以下是如何实现:

import Vue和abilities plugin。这个插件添加CASL的Vue的原型,让我们从内部组件可以调用它。

Import 我们的规则集到Vue(如resources/abilities.js)

定义一个当前用户。在一个真正的应用程序中,我们可以从服务器获取这个用户数据。对于我们的示例,我们只需硬编码一个即可。

记住,abilities 模块的exports一个函数,我们称之为defineAbilitiesFor。我们要将用户对象传递给这个函数。现在,每当检测对象时,我们都可以看到当前用户可用的权限。

添加abilities插件,允许我们在组件内进行测试如 likethis.$can(...)。

Post实体

我们的应用程序将使用表示分类广告职位的对象。他们可能是从数据库中检索,然后传递到前端的服务器,例如:

我们的Post实体必须有两个属性:

类型属性。CASL将使用定义在abilities.js的实体,通过subjectname回调来确定正在检测什么样的用户。

用户属性。这是Post的所有者。记住,用户只有拥有了更新和删除权限。在main.js我们已经告诉CASL他目前的用户是defineabilitiesfor(用户ID)。CASL现在所需要做的是检查用户的ID与用户属性。

鉴于这两个Post对象,我们当前的用户乔治拥有ID 1,它将在第一个帖子上有更新/删除权限,但第二个帖子没有这个权限。

检测用户权限

在我们的应用程序中通过一个名为“帖子”的组件显示帖子。先看一下代码,然后我们把它分解到下面:

当用户点击删除按钮的时候,删除方法是捕获一个被称为delete的处理程序。

然后,我们使用CASL检查,用户是否有权限操作this.$can('delete', post)。如果他们有这个权限,我们可以采取相应一些操作。如果没有一个则提示一个错误的消息,“只有这个职位的发布者可以删除它!”。

服务器端检测

在实际应用中,用户在前端deletes后,我们将删除的功能使用Ajax发送一个指令到一个API(应用程序接口),例如:

我们会把CASL检测的逻辑放在服务器上,因为服务器来确认来自客户端的CRUD操作:

server.js

由于CASL是同构的,服务器上的对象可以从abilities.js中importability,我们不需要做任何重复的编码!

总结

这样,我们就有一个很好的方式,可以在一个Vue应用中很简单的管理用户权限了。

我相信this.$can('delete', post)比下面的代码好的多:

这不仅是更难阅读,而且,这里有一个隐含的规则,即用户可以删除一个帖子。毫无疑问,这条规则将在我们应用程序的其他地方使用,并且应该真正被抽象出来。这正是CASL可以为我们做。

感谢Sergii Stotskyi,CASL的创造者,支持这篇文章。

分享一个 Vue.js 2 的入门级全家桶系列教程:

1.vue.js 2 入门与提高 http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99
2.vuex 2 入门与提高
http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a
3.vue-router 2 入门与提高 http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50
4.vue.js 2 工程化实践 http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复