Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CASL is not working properly in Vue Production Mode #219

Closed
s4h1u1b9h9a2m opened this issue Aug 27, 2019 · 4 comments
Closed

CASL is not working properly in Vue Production Mode #219

s4h1u1b9h9a2m opened this issue Aug 27, 2019 · 4 comments
Labels

Comments

@s4h1u1b9h9a2m
Copy link

s4h1u1b9h9a2m commented Aug 27, 2019

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:
image

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:
image

@manojchowdary27
Copy link

+1

@stalniy
Copy link
Owner

stalniy commented Aug 27, 2019

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:

@stalniy stalniy closed this as completed Aug 27, 2019
@s4h1u1b9h9a2m
Copy link
Author

Thanks it worked.

@mca-pradeep
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants