Multiple warnings and errors during configuration

Hi!

I’m using Vue 2.5.2, and this is an existing and stable application I’m hoping to improve with CASL.

So far, nothing I’ve tried works, and that includes the import ability from './ability' which gave me errors:

Module not found: Error: Can’t resolve ‘./ability’

I switched to: import ability from '@casl/ability' which gives me the following warnings:

[casl]: Ability contains only inverted rules. That means user will not be able to do any actions. This will be changed to Error throw in the next major version

"export ‘default’ (imported as ‘ability’) was not found in ‘@casl/ability’

… and the errors:

[Vue warn]: Property or method “$can” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Vue warn]: Error in render: “TypeError: _vm.$can is not a function”

TypeError: _vm.$can is not a function

In the “main.js” file, I have:

import ability from '@casl/ability'

new Vue({
  el: '#app',
  router,
  store,
  ability,
  template: '<App/>',
  components: { App }
})

In the "App.vue file, I have:

<template>
	<router-link v-if="$can('read', 'Team')" to="/teams" class="navbar-item">
		Teams
	</router-link>
</template>

import { AbilityBuilder } from '@casl/ability'

export default {
    name: 'App',
    ability: AbilityBuilder.define((can, cannot) => {
      switch (this.userGroupID) {
        case 1:
          break
        case 2:
          break
        case 3:
          break
        case 4:
          cannot('read', 'Team')
          break
      }
    }),...

I’m assuming this is how I use the this.userGroupID parameter, but I have no idea if it is working or not, given the multiple warnings and errors, and I have no idea what to do with ability, since there’s no guidance in the documentation, in the context of Vue.

I tried using the Can package, but that created more warnings and errors, so I had to abandon that.

Some assistance would be much appreciated.

[OctaneInteractive]

I looked at the example but it’s far too complicated to understand — for instance, the example deviates from the documentation in how ability is imported (in the example, it’s in a “*.js” file), and it doesn’t explain how the user ID (or other parameters) are passed into the ability object.

Yes, I’ve read both of those documents, but — as I said — the example deviates from the documentation, and it’s far too complex.

What would make far more sense, would be to provide a basic minimum configuration that matches the documentation.

Also, you haven’t explained the reasons for the multiple errors on the initial import; I removed the code from the Vue component, to isolate the errors, and the import isn’t working.

[stalniy]

https://stackoverflow.com/questions/tagged/casl