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

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 }))

现在，当我运行此代码处于 local/development 模式时。它工作正常（在需要的地方给我 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

告诉我为什么会这样。

在此处重复了这些步骤。

按照以下 link 查看运行ning 和预期版本： LINK 01 输出：

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

在本地克隆相同的项目，或从 [github 2 下载在运行ning 之后，我们得到这个输出：

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

Answer 1

得到解决方案。由于生产构建代码的缩小没有按预期工作。必须将 modelName 函数定义为 return 专有名称。

关注link了解更多信息。

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

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

CASL is not working properly in Vue Production Mode

vue.js

casl