Skip to content
Example of CASL based auhorization integration with Vue + Vuex + REST API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
public feat(app): implements login Mar 30, 2018
src refactor(app): moves confirm into separate Vue plugin May 11, 2018
.babelrc init Mar 30, 2018
.gitignore init Mar 30, 2018
package-lock.json feat(app): implements CRUD for articles May 9, 2018

CASL integration example with Vue + Vuex + REST API

This example shows how to integrate CASL auhorization in more or less real Vue application with Vuex and REST API. Read CASL and Cancan for details

Generate with vue-cli


# install vue cli 3
npm install -g @vue/cli

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve


This application is a basic Blog application with possibility to login, logout and manage articles. User abilities are received from REST API and later stored in localStorage.

Ability plugin for Vuex store can be found in src/store/ability.js. When user successfully login (i.e., createSession mutation is dispatched in store), ability is updated and when user logout (i.e., destroySession mutation is dispatched) ability is reset to read-only mode.

http service is built on top of Fetch API with some hacky code (it is not important for this example). Also this example uses vuetify as UI library

Server side

REST API is expected to be available at http://localhost:3000/api and support CORS headers. This example was tested and implemented together with Rails5 + Cancan but API can be implemented in whatever language you want. It's just a showcase that CASL can be seamlessly integrated with awesome Cancan ruby gem

If you setup rails application, there are 2 users available:

You can’t perform that action at this time.