error in using casl for role based permission

Question

This is how I have defined ability using casl

ability.js

import { AbilityBuilder } from '@casl/ability';
//   case 'Administrator':
// localStorage.getItem('role')
export default function() {
 AbilityBuilder.define(can => {
    switch(localStorage.getItem('role')) {
      case 'Admin':
      case 'CEO':
        can(['add', 'read','update', 'delete']);
        break;
     case 'Manager':
        can(['add', 'read','update', 'delete']);
        break;
     case 'Senior':
        can(['add', 'read']);
        break;
     case 'Clerk':
     case 'Administrator':
       can('read');
       break;  
    }
  })
}

I have registered in main.js

import { abilitiesPlugin } from '@casl/vue';
import ability from './config/ability';

Vue.use(abilitiesPlugin, ability);

Now I wanted to use it in the component:

<v-icon
   v-if="$can('delete')"
   small
   class="mr-2"
   @click="editItem(item)"
   >
   edit
</v-icon>

This is giving me error : Error in render: "TypeError: t.on is not a function". I have implemented this using few resources online. So the error says that the can is not defined.

Answer 1

You return a function from config/ability but Vue.use expects to receive an Ability instance.

The error says that something trying to access on property on the t, where t is an argument of abilitiesPlugin function from @casl/vue.

So, replace the line Vue.use(abilitiesPlugin, ability); with Vue.use(abilitiesPlugin, ability()); in main.js . This should fix the error.

P.S.: make sure to use the latest version. AbilityBuilder.define is removed from CASL v4