Updating Ability doesn't persist

[Foxh0und]

Hi,

This is probably user error, but I am having a bit of trouble getting my head around the package.
The goal that I am trying to achieve is when a user logs in, a JSON file is retrieved via an API, then I'll use that to create my rules. Here is what I currently have.

ability.js

import { AbilityBuilder } from "@casl/ability";

export default AbilityBuilder.define( can => {
	can( "read", "all" );
} );

main.js (parts of)

import { abilitiesPlugin } from "@casl/vue";
import ability from "./ability.js";

Vue.use( abilitiesPlugin, ability );

Then in my login page, after it retrieves the JSON object and begins to parse it.

  this.$ability = AbilityBuilder.define( can => {
                    for(...JSON) {
                        can(...)
                   }
                        }
                    }
                } );

Straight after this, I print out this.$ability, and it's fine, but when I go to my next page, it's returned to the way it was at the start.

As I said, probably user error, or my misunderstanding of the documentation so who knows!

[stalniy]

Hi,

You can't change ability via this.$ability = . You change it only for your component. All other components will use top level defined ability (from Vue.prototype). That's why your changes don't persist when you switch to another route.

What you need to do is to update ability rules. So, change the part where you update ability to this:

const { can, rules } = AbilityBuilder.extract()

for(...JSON) {
  can(...)
}

this.$ability.update(rules)

But keep in mind that you need to persist rules somewhere (e.g., in localStorage), so if user reloads the page he will see only what he can see.

[stalniy]

close as there is nothing to fix. Thanks for the interest to casl

[stalniy]

Feel free to ask more questions in gitter chat or on stackoverflow