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

【问题标题】：CASL is not working properly in Vue Production ModeCASL 在 Vue 生产模式下无法正常工作
【发布时间】：2019-08-27 15:00:21
【问题描述】：

我已经为特定角色定义了一些规则，它们都运行良好。但是当我在生产模式下构建 vue 项目时，所有规则都给出了错误。详情如下：

我有这个文件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 }))

现在，当我在本地/开发模式下运行此代码时。它工作正常（在需要的地方给了我真实的信息），但是当我生成生产版本时，它没有按预期工作（总是给我错误）

开发构建命令：

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 01 输出：

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

在本地克隆同一个项目，或者从[github2下载运行后，我们得到以下输出：

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

【问题讨论】：

标签： vue.js casl

【解决方案1】：

找到解决方案。由于生产构建代码的缩小没有按预期工作。必须定义 modelName 函数才能返回正确的名称。

【讨论】：