The example has been moved to https://github.com/stalniy/casl-examples/tree/master/packages/vue-todo
This example shows how to integrate CASL auhorization in Vuejs2 application. Read Vue ACL with CASL for detailed explanation.
Generate with vue-cli
Note: refactored to use CASL 2.0. See @casl/ability and @casl/vue for details.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
This application is a basic Todo application with possibility to specify assignee for a task. By default, all users are able to create and read all tasks but update and delete only assigned to them. Any user may create a task and assign it to other users.
Ability configuration can be found in src/config/ability.js
, the Vue plugin for abilities is provided by @casl/vue
. The plugin adds $can
(references ability.can
) method to every Vue component and make sure that all components (that use $can
) are updated when ability.update
method is called.
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed" v-if="$can('update', todo)">
<label @dblclick="$can('update', todo) && editTodo(todo)">{{ todo.title }}</label>
<button class="destroy" v-if="$can('delete', todo)" @click="removeTodo(todo)"></button>
</div>
Another example: Example of integration CASL with Vuex and REST API