This example shows how to integrate CASL in Vue application with Vuex and REST API.
# install deps
npm install
# serve with hot reload at localhost:8080
npm run serveThis application is a basic blog application with possibility to login, logout and manage articles. User abilities are received from server 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
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
See README of the rails REST API for details on how to setup server.
You can use CASL Express API together with this UI. This API uses MongoDB as a database, so you will need to have one running on localhost (you can set the connection string to MongoDB in src/app.js)
Make sure VUE_APP_API_URL option in .env file specified to the correct API URL.
For more details, read README of CASL Express.js example.
MIT