详解VueJS应用中管理用户权限

　　

在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见,比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮。

　　

在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码:

　　 　　 　　如果用户。类型===ADMIN | |用户。身份验证,,职位。老板===用户。id) { 　　… 　　} 　　 　　

作为代替方案,一个简洁轻量的库——CASL可以让管理用户权限变得非常简单,只要你用CASL定义了权限,并设置了当前用户,就可以把上面的代码改为这样:

　　 　　 　　如果能力。可以(“更新”,“文章”)){ 　　… 　　} 　　 　　

在这篇文章里,我会展示如何在前端应用里使用Vue.js和CASL来管理权限。

　　

详解VueJS应用中管理用户权限

　　

CASL速成课程

　　

CASL可以让你定义一系列规则来限制哪些资源对用户可见。

　　

比如,CASL规则能够标明用户可以对给定的资源和实例(帖子,文章,评论等)进行哪些CRUD(创建、读取、更新和删除)操作。

　　

假设我们有分类广告网站。最显而易见的规则就是:

　　

游客可以浏览所有帖子
　　

　　

管理员可以浏览所有帖子,并且可以更新或删除
　　

　　

使用CASL,我们用AbilityBuilder来定义规则。调用可以来定义一条新规则。例如:

　　 　　 　　onst {AbilityBuilder}=要求(“casl”); 　　 　　导出功能(类型){ 　　AbilityBuilder.define(=能比;{ 　　开关(类型){ 　　例“客人”: 　　可以(“读”,“文章”); 　　打破; 　　例“管理”: 　　可以(“读”,“文章”); 　　可以(“更新”,“删除”,“文章”); 　　打破;//在这里添加更多的角色 　　} 　　} 　　}; 　　 　　

现在,就可以用定义的规则来检查应用权限了。

　　 　　 　　从“进口defineAbilitiesFor。/能力”; 　　 　　让currentUser={ 　　id: 999年, 　　名称:“朱莉” 　　类型:“注册”, 　　}； 　　 　　让能力=defineAbilitiesFor (currentUser.type); 　　 　　Vue.component ({ 　　模板:“& lt; div> & lt; div> 　　& lt; div>请日志in
　　｀， 　　道具:“文章”, 　　计算:{ 　　showPost () { 　　回报的能力。可以(“读”,“文章”); 　　} 　　} 　　}); 　　 　　

演示课程

　　

作为演示,我做了一个用来展示分类广告帖子的服务器/客户端应用。这个应用的规则是:用户能够阅读帖子或发的帖,但是只能更新或删除自己的帖子。

　　

我用Vue.js和CASL来方便地运行和扩展这些规则,即使以后添加新的操作或实例也将很方便。

　　

现在我就带你一步步搭建这个应用。如果你想一睹为快,请戳这个Github回购。

　　

定义用户权限

　　

我们在资源/ability.js中定义用户权限.CASL的一个优点是与环境无关,也就是说它既能在节点中运行,也能在浏览器中运行。

　　

我们会把权限定义写到一个CommonJS模块里来保证节点的兼容性(Webpack能让这个模块用在客户端)。

　　

资源/ability.js 　　 　　 　　const casl=要求(“casl”); 　　 　　模块。出口=function defineAbilitiesFor(用户){ 　　返回casl.AbilityBuilder.define ( 　　{subjectName:项=比;项。类型},=比;{ 　　可以(“读”,“创造”,“文章”); 　　可以(“更新”,“删除”,“文章”,{用户:用户}); 　　} 　　); 　　}; 　　 　　

下面我们来剖析这段代码。

　　

定义方法的第二个参数,我们通过调用可以来定义了权限规则。这个方法的第一个参数是你要允许的CRUD操作,第二个是资源或实例,在这个例子中是职位。

　　

注意第二个可以的调用,我们传了一个对象作为第三个参数。这个对象是用来测试用户属性是否匹配我们提供的用户对象。如果我们不这么做,那不光创建者可以删帖,谁都可以随便删了。

　　

资源/ability.js 　　 　　 　　… 　　casl.AbilityBuilder.define ( 　　…=比;{ 　　可以(“读”,“创造”,“文章”); 　　可以(“更新”,“删除”,“文章”,{用户:用户}); 　　} 　　); 　　 　　

CASL检查实例来分配权限时,需要知道实例的类型。一种解决方式是把具有subjectName方法的对象,作为定义方法的第一个参数,subjectName方法会返回实例的类型。

详解VueJS应用中管理用户权限