Laravel Vue SPA: Roles and Permissions Example with CASL

In this tutorial, we will show how to add permissions to the Laravel application with Vue.js SPA architecture. For the example, we will take a basic CRUD of posts, create two roles (admin and editor), and the editor role will not be able to delete the posts.

  • For the back-end, we will use Laravel Gates
  • For the front-end, we will use the CASL Vue package.
  • Also, for Vue.js we will use the <script setup> Composition API method with Composables

vue.js permissions

Let's dive in!


Permissions, Roles, Gates: Back-End

First, we will create the models with migrations for roles and permissions.

php artisan make:model Role -m
php artisan make:model Permission -m

database/migrations/xxxx_create_roles_table.php:

public function up(): void
{
Schema::create('roles', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}

app/Models/Role.php:

class Role extends Model
{
protected $fillable = ['name'];
}

database/migrations/xxxx_create_permissions_table.php:

public function up(): void
{
Schema::create('permissions', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}

app/Models/Permission.php:

class permissions extends Model
{
protected $fillable = ['name'];
}

Next, we need to create a pivot table for...

The full tutorial [9 mins, 1658 words] is only for Premium Members

Login Or Become a Premium Member for $129/year or $29/month
What else you will get:
  • 59 courses (1056 lessons, total 44 h 09 min)
  • 78 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials