在需要身份验证的前端应用里，我们经常想通过用户角色来决定哪些内容可见。比如，游客身份可以阅读文章，但注册用户或管理员才能看到编辑按钮。
在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码：
if (user.type === ADMIN || user.auth && post.owner === user.id ) {
...
}
作为代替方案，一个简洁轻量的库——CASL——可以让管理用户权限变得非常简单。只要你用CASL定义了权限，并设置了当前用户，就可以把上面的代码改为这样：
if (abilities.can('update', 'Post')) {
...
}
在这篇文章里，我会展示如何在前端应用里使用Vue.js和CASL来管理权限。
CASL 速成课程
CASL可以让你定义一系列规则来限制哪些资源对用户可见。
比如，CASL规则能够标明用户可以对给定的资源和实例（帖子、文章、评论等）进行哪些CRUD（Create, Read, Update和Delete）操作。
假设我们有分类广告网站。最显而易见的规则就是：
游客可以浏览所有帖子
管理员可以浏览所有帖子，并且可以更新或删除
使用CASL，我们用AbilityBuilder来定义规则。调用can来定义一条新规则。例如：
onst { AbilityBuilder } = require('casl');
export function(type) {
AbilityBuilder.define(can => {
switch(type) {
case 'guest':
can('read', 'Post');
break;
case 'admin':
can('read', 'Post');
can(['update', 'delete'], 'Post');
break;
// Add more roles here
}
}
};
现在，就可以用定义的规则来检查应用权限了。
import defineAbilitiesFor from './abilities';
let currentUser = {
id: 999,
name: "Julie"
type: "registered",
};
let abilities = defineAbilitiesFor(currentUser.type);
Vue.component({
template: `<div><div>
<div>Please log in</div>
`,
props: [ 'post' ],
computed: {
showPost() {
return abilities.can('read', 'Post');
}
}
});
Demo 课程
作为演示，我做了一个用来展示分类广告帖子的服务器/客户端应用。这个应用的规则是：用户能够阅读帖子或发帖，但是只能更新或删除自己的帖子。
我用Vue.js和CASL来方便地运行和扩展这些规则，即使以后添加新的操作或实例也将很方便。
现在我就带你一步步搭建这个应用。如果你想一睹为快，请戳这个Github repo。
定义用户权限
我们在 resources/ability.js中定义用户权限。CASL的一个优点是与环境无关，也就是说它既能在Node中运行，也能在浏览器中运行。