Multiple warnings and errors during configuration

[OctaneInteractive]

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]

Having made no changes, I'm now getting another error:

ERROR in ../node_modules/@casl/ability/dist/es5m/index.js Module build failed: Error: ENOENT: no such file or directory, open 'path_redacted/node_modules/@casl/ability/dist/es5m/index.js'

... with:

import ability from '@casl/ability'

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

[stalniy]

Hi,

Have you tried to run example app (https://github.com/stalniy/casl-vue-example)?

[stalniy]

What I can say you that it looks like you are trying to do everything except reading docs :)

Please check these Readme files as well:

• https://github.com/stalniy/casl/blob/master/packages/casl-ability/README.md
• https://github.com/stalniy/casl/blob/master/packages/casl-vue/README.md

[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]

The example doesn't diviate from docs.

1. Create Ability instance: in example: https://github.com/stalniy/casl-vue-example/blob/master/src/config/ability.js#L14 in docs: https://stalniy.github.io/casl/#1-define-abilities
2. Import vue plugin and pass Ability instance inside in example, https://github.com/stalniy/casl-vue-example/blob/master/src/main.js#L4-L5 in docs https://github.com/stalniy/casl/blob/master/packages/casl-vue/README.md#1-including-plugin

So, where do you see deviation?

You won't find something like the code below in the docs:

import ability from '@casl/ability'

To answer you questions: you just completely incorrectly trying to include casl in your vue app.

1. You tried to include import ability from './ability' without defining ability.js in side folder where you have main.js. That's why vue cli (or webpack) said you that such module doesn't exist
2. import ability from '@casl/ability' I don't know why you did this because if you check docs you will understand that @casl/ability exports 2 main classes Ability and AbilityBuilder
3. You didn't include casl vue plugin, that's why you have issue Error in render: "TypeError: _vm.$can is not a function"

P.S.: it's open source, if you think you can improve something I'm ready to review your fix to docs or code. I do this project in my free private time.

[stalniy]

Just follow the docs, debug the example and you will understand. You are asking very basic questions which are highlighted in docs. Junior developer from my team was able to include casl in our project, so I believe you also will do this.

Close as there is nothing to fix casl side.

[stalniy]

Thanks for the interest to casl.

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

[OctaneInteractive]

In the main documentation for the repo, there's no mention of using a "config.js" file, but then you use one in the example — that's one deviation, of which there are several others, which makes it confusing to follow and difficult to get anything working.

Another example is: "1. Including plugin" — where? You make no mention, when it could be either "main.js" or the component.

In: "2. Defining Abilities" you mention import ability from './ability' but don't explain that this is a file the developer is supposed to create.

In: "4. Provide ability for a components tree":

export default {
    name: 'TodoList',
    ability: AbilityBuilder.define(can => {
      ...
    })
  }

... it would have been useful to have provided some code where there is the "...", such as passing in a variable for a user ID or similar, and I've found no such example.

I've spun the project up and got another warning, this time on the command line:

WARNING Compiled with 1 warnings >19:56:05 warning in ./src/main.js 27:11-18 "export 'default' (imported as 'ability') was not found in '@casl/ability'

Again, I've changed nothing in "main.js", which also makes things much more difficult to follow and understand.

I appreciate the hard work and dedication you've made, but so far what little I've got working has been scavenged from articles found via Google and not here, which is unfortunate.

[stalniy]

config.js is not part of CASL. This file may have any name and is not required. The thing which is required inside file. CASL don’t care how you organize your project or filesystem.

The place where you need to include a plugin is documented in Vue docs. Usually you will do this in main.js

I expect a developer to understand that ./ability is a relative file, not npm module. Also you can see this in example.

The warning says you that you incorrectly using import. This is not warning generated by CASL but a warning from webpack (or similar tool)

Sorry that there is no more fluent getting started article. I plan to work on it some day, when I have more time for CASL. Currently very busy at the my current job (you can track this issue https://github.com/stalniy/casl/issues/144)

[stalniy]

Start from main.js and just follow imports.

About login you may find answer on stackoverflow. Somebody has asked me this some time ago

[stalniy]

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