Member-only story
This article outlines how to use vue-cancan to share your abilities from your Rails app with your Vue components.
CanCanCan is still my favorite gem for authorization, works great when you single-table-inheritance to define permissions for subclassed users like guest, admin, etc.
However when I started using Vue components in my Rails apps, I quickly realized I wasn’t able to show or hide elements based on the current user’s abilities. Well, thankfully vue-cancan adds this functionality to make your life a lot easier.
Add CanCancan Gem
First add the cancancan gem to your Gemfile.
bundle add cancancanNext run the generator to create the ability.rb file where you’ll define user permissions.
rails generate cancan:abilityAdd Vue-CanCan Package
Then add vue-cancan via Yarn to your package.json.
yarn add vue-cancanSetup Frontend Abilities
To be able to check permissions in your Vue components, you’ll need to share abilities from Rails with the frontend. You can do this by including the following in the <head> of your…
