构建Vue.js项目后，CASL库不工作

Question

我试着通过类实例检查能力:

<Can
I="delete"
:a="createHomeTask(item.teacher.id)"
>
</Can>

Where ability description:

if (role === 'ROLE_teacher') {
can('delete', 'HomeTask', { teacher: user.id });
}

createHomeTask:

class HomeTask {
constructor(teacherId) {
this.teacher = teacherId;
}
}
export default function createHomeTask(teacherId) {
return new HomeTask(teacherId);
}

在构建项目之前，一切正常，但在构建之后，此功能不起作用。

有什么问题吗?

Answer 1

我认为这是由于Vue在构建时最小化代码导致的，因此CASL无法正常工作。这个问题可能也与您的问题有关:CASL在Vue生产模式下不能正常工作。(然而，由于某些原因，答案中的文档链接已经过时，但我保存了该页)

在官方文档中(至少更早)解决了这个问题:

默认情况下，CASL在传递的对象的构造函数上查找modelName属性(如果构造函数名称为空，则回退到构造函数名称)。

class Post {
constructor({ title, published }) {
this.title = title
this.published = published
}
}

重要的

如果你在生产构建中使用最小化，它也会最小化类名，这个例子就行不通了。对于这种情况，您可以在类上定义静态modelName属性。

在这个例子中，ability将检查Post规则而不检查Article规则:

class Article {
static get modelName() {
return 'Post'
}
constructor({ title, published }) {
this.title = title
this.published = published
}
}

我建议你试着这样做:

class HomeTask {
static get modelName() {
return 'HomeTask'
}
constructor(teacherId) {
this.teacher = teacherId;
}
}

我希望这对你有帮助。