sandrew / vue-cancan Goto Github PK

Looks like Vue3 no longer supports prototype now requires using globalProperties instead.

https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties

In Vue 2, Vue.prototype was commonly used to add properties that would be accessible in all components.The equivalent in Vue 3 is config.globalProperties. These properties will be copied across as part of instantiating a component within the application.

Any plans or suggestions how to make vue-cancan work with Vue3?

I'm having problems getting vue-cancan to work in my Rails 6 + Vue app. 😞

Initially I was getting stack level too deep when calling current_ability.to_json.html_safe.

So implemented as_json in ability.rb as suggested in the readme.

def as_json(options = {})
  rules.map do |rule|
    {
      base_behavior: rule.base_behavior,
      actions: rule.actions.as_json,
      subjects: rule.subjects.map(&:to_s),
      conditions: rule.conditions.as_json
    }
  end
end

This got rid of the stack level too deep error.

<script>
window.abilities = <%= current_ability.to_json.html_safe %>
</script>

However started getting Cannot read property 'rules' of undefined from this line

Vue.use(VueCanCan, { rules: window.abilities.rules });

This is what the inline JSON looks like

window.abilities = [{"can":true,"base_behavior":true,"actions":["manage"],"subjects":["User"],"conditions":{}},{"can":true,"base_behavior":true,"actions":["manage"],"subjects":["Note"],"conditions":{}}]

Should the JSON embed code just be?

Vue.use(VueCanCan, { rules: window.abilities });

Or is the structure of my as_json method wrong?

Hi there,

I'm just wondering whether you would like to use casl to achieve your goals.

This library implements cancan for JavaScript in isomorphic way + a bit more.

this will allow to close all your TODOS :)

Also a while ago there were published 2 articles about Vue and Casl. I think it's worth to check out:

• https://medium.com/@sergiy.stotskiy/vue-acl-with-casl-781a374b987a

• https://vuejsdevelopers.com/2018/01/08/vue-js-roles-permissions-casl

I'm the author of this library, so feel free to ask questions if any.

Looking forward for productive collaboration!