Laravel Projects Examples

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.

Want to get the access to GitHub repository?

Become a Premium Member for $129/year or $29/month