Vue not implemented correctly

[matze1708]

Hello all,

I have now spent almost a whole day, I have to ask now.

I used VUEjs 2x and want to include casl/ability.

I have 2 js files, in one I try to define the abilitys in the other the plugin.

ability.js

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

export default function defineAbilitiesFor(userRoles) {
    const { can, rules } = new AbilityBuilder();
    if (userRoles) {
        userRoles.forEach((value) => {
            if (value.name.startsWith('RN_')) {
                can('Room', value.room);
            }
            value.permissions.forEach((pValue) => {
                let splitName = '';
                switch (true) {
                    case (pValue.name.startsWith('P_')):
                         break;
                    case (pValue.name.startsWith('PC_')):
                        splitName = pValue.name.split('_');
                        can('Control', pValue.utControl_ID);
                        break;
                    default:
                        splitName = pValue.name.split(' ');
                        can(splitName[0], pValue.module);
                        break;
                }
            });
        });
    }

    can('view', 'home');
    can('view', 'about');
    can('view', 'auth');
    can('view', 'admin');
    // console.log(rules);
    return rules;
}

casl.js

import Vue from 'vue';
import { abilitiesPlugin } from '@casl/vue';
import { Ability } from '@casl/ability';
import defineAbilitiesFor from './ability';
import store from '../store';

let ability = new Ability([]);

if (store.getters['profile/loggedIn']) {
    store.dispatch('profile/getCurrent')
        .then(() => {
            ability = new Ability(defineAbilitiesFor(store.state.profile.roles));
        })
        .catch((error) => {
            ability = new Ability(defineAbilitiesFor(store.state.profile.roles));
            console.log(`Error while requesting user: ${error}`);
        });
} else {
    ability = new Ability(defineAbilitiesFor(store.state.profile.roles));
}
Vue.use(abilitiesPlugin, ability);

in the main.js I only import the

import './plugins/casl-vue';

when i log the rules in ability.js, i can see that it creates some.
If I go into my component and query them via this.$can('Control',3), I get a false back. But the rules were created.

Am I basically doing something wrong here?

What do I have to do to get it to run?

Thanks a lot

[stalniy]

You just incorrectly update Ability, do this instead:

let ability = new Ability([]);

if (store.getters['profile/loggedIn']) {
    store.dispatch('profile/getCurrent')
        .then(() => {
            ability.update(defineAbilitiesFor(store.state.profile.roles));
        })
        .catch((error) => {
            ability.update(defineAbilitiesFor(store.state.profile.roles));
            console.log(`Error while requesting user: ${error}`);
        });
} else {
    ability.update(defineAbilitiesFor(store.state.profile.roles));
}
Vue.use(abilitiesPlugin, ability);