在Vue生产模式下，CASL无法正常工作。

Question

我定义了一些特定角色的规则，它们都正常工作。但是当我在生产模式下构建vue项目时，所有规则都会返回false。以下是详细信息:

我有一个名为ability.js的文件，它提供给我规则：

export const getRules = (role, userId) => {
     const { can, cannot, rules } = AbilityBuilder.extract()
     switch(role) {
          case 'TENANT_ADMIN':
                   can('manage', 'all')
                   break
          case 'TENANT_AGENT': 
                   can('view', 'ConversationView')
                   break
          case 'TENANT_AGENT_LIMITED': 
                   can('view', 'ConversationView', { userId: userId })
                   break
     }
     return rules
}

我正在App.vue中更新规则（所有值都是有效的）。

this.$ability.update(getRules(role, userId))

我正在使用以下代码检查权限。

class ConversationView {
    constructor(props) {
        Object.assign(this, props)
    }
}

this.$can('view', new ConversationView({ userId: Id }))

现在，当我在本地/开发模式下运行这段代码时，它能够正常工作（在需要的地方给出 true），但是当我生成生产构建时，它不像预期那样工作（始终给出 false）。 开发构建命令：

vue-cli-service build --mode local --modern

开发构建 .env.local

VUE_APP_STAGE=development
NODE_ENV=development

生产构建命令：

vue-cli-service build --mode prod --modern

生产构建 .env.prod

VUE_APP_STAGE=production
NODE_ENV=production

请告诉我为什么会发生这种情况。

在此处复制了步骤。

点击下面的链接查看运行和期望版本： 链接 01 输出：

Checking for '1' => true 
Checking for 1 => false 
Checking for '2' => false

在本地克隆相同的项目或从 [github 2] 下载它。

运行后，我们会得到以下输出：

Checking for '1' => false 
Checking for 1 => false 
Checking for '2' => false

- s4h1u1b9h9a2m

Answer 1

问题已解决。由于生产构建代码的缩小，代码未按预期工作。必须定义modelName函数以返回正确的名称。

请点击链接获取更多信息。

https://stalniy.github.io/casl/abilities/2017/07/21/check-abilities.html#instance-checks

- s4h1u1b9h9a2m