CASL integration example with Vue + Vuex + REST API

DEPRECATED

The example has been moved to https://github.com/stalniy/casl-examples/tree/master/packages/vue-blog

---

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

Installation

# install dependencies
npm ci

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

Description

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:

• admin - [email protected] / 123456
• member - [email protected] / 123456

Alternative Server side API

You can use Express based API together with this UI. Pay attention to the branch name, it should be vue-api. This API uses MongoDB as a database, so you will need to have one running on localhost or you can change the connection string in src/app.js

Also you will need to change API URL in .env file to http://localhost:3030.

There are 3 users available:

• [email protected] / 123456
• [email protected] / 123456
• [email protected] / 123456