CASL is not working properly in Vue Production Mode

[s4h1u1b9h9a2m]

Hi,
I have defined some rules for specific roles, they all are working fine. But when I build vue project in production mode, all the rules gives false. Details are here below:

I have this file ability.js, which is giving me rules:

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
}

I'm updating rules like this in App.vue (all values are valid)

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

I'm checking permissions using below code.

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

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

Now, when I run this code in local/development mode. It is working fine (giving me true where it needs to), but when I generate a production build it is not working as expected (always gives me false)

Development Build Command:

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

Development Build .env.local

VUE_APP_STAGE=development
NODE_ENV=development

Production Build Command:

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

Production Build .env.prod

VUE_APP_STAGE=production
NODE_ENV=production

Let me know why this is happening.

Replicated the steps here.

Follow below link to view running and expected version:
https://codesandbox.io/embed/github/s4h1u1b9h9a2m/vue-casl-example/tree/master/
Output:

Clone the same project in your local, or download from here (https://github.com/s4h1u1b9h9a2m/vue-casl-example)
After running, we're getting this output:

[manojchowdary27]

+1

[stalniy]

Hi, thanks for the issue.

It’s not a CASL issue. The names of classes are minified by Vue cli (or uglify or whatever you use). So, the name in production is just a single letter. Information about type is lost then.

There are 2 ways to workaround:

• written in the docs (instance checks important section): https://stalniy.github.io/casl/abilities/2017/07/21/check-abilities.html#instane-checks
• use classes as the 2nd argument of can: (e.g., can(“view”, ConversationView))

[s4h1u1b9h9a2m]

Thanks it worked.

[mca-pradeep]

You just need to create a static function in your class like this

class ConversationView {
static get modelName() {
return "ConversationView";
}
constructor(props) {
Object.assign(this, props)
}
}