Laravel Inertia Vue Roles Permissions with Spatie package

This project demonstrates how to add roles and permissions with spatie/laravel-permission package to your Inertia with Vue.js application.

How It Works

In this project, we use the spatie/laravel-permission package to manage roles with permissions.

In the backend, we check permissions using Gates in the controller.

app/Http/Controllers/TaskController.php:

use App\Http\Requests\StoreTaskRequest;
use App\Http\Requests\UpdateTaskRequest;
use App\Models\Task;
use Illuminate\Http\RedirectResponse;
use Illuminate\Support\Facades\Gate;
use Inertia\Inertia;
use Inertia\Response;
 
class TaskController extends Controller
{
    public function index(): Response
    {
        $tasks = Task::all();
 
        return Inertia::render('Tasks/Index', compact('tasks'));
    }
 
    public function create(): Response
    {
        Gate::authorize('task_create'); 
 
        return Inertia::render('Tasks/Create');
    }
 
    public function store(StoreTaskRequest $request): RedirectResponse
    {
        Gate::authorize('task_create'); 
 
        Task::create($request->validated());
 
        return redirect()->route('tasks.index');
    }
 
    public function edit(Task $task): Response
    {
        Gate::authorize('task_edit'); 
 
        return Inertia::render('Tasks/Edit', compact('task'));
    }
 
    public function update(UpdateTaskRequest $request, Task $task): RedirectResponse
    {
        Gate::authorize('task_edit'); 
 
        $task->update($request->validated());
 
        return redirect()->route('tasks.index');
    }
 
    public function destroy(Task $task): RedirectResponse
    {
        Gate::authorize('task_destroy'); 
 
        $task->delete();
 
        return redirect()->route('tasks.index');
    }
}

We pass a list of user permissions to the front end using the Inertia shared data feature in the HandleInertiaRequests Middleware.

Next, we will implement these permissions into Inertia handler.