Spatie Permission in Laravel 8 VILT app (Part 2)

In his tutorial we’ll learn how to use Spatie Permission in VILT (Vue, Inertiajs, Laravel, Tailwind) app. In order to follow this tutorial you should preferably have a fresh installation of Laravel using VILT stack and have Spatie Permission installed along with demo data as described in part 1 of this tutorial or the official documentation of Spatie Permission.

Ok, let’s get going. First create a UserController by entering the following command:

php artisan make:controller UserController

The above command will create UserController.php in app/Http/Controllers folder. Now put the following code into newly generated UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Inertia\Inertia;

class UserController extends Controller
{
  public function index(Request $request)
  {
    $data = User::all()->map(function($user){
      return [
        'id' => $user->id,
        'name' => $user->name,
        'email' => $user->email,
        'can' => [
            'edit_articles' => $user->can('edit articles'),
          ],
        ];
      });
    return Inertia::render('Users/Index', [
      'data' => $data,
      'can' => auth()->user()->can('publish articles'),
    ]);
  }
}

The index method in the above UserController will pass on two variables to ‘Users/Index’ view i.e. ‘data’ and ‘can’. The ‘data’ variable will contain ‘id’, ‘name’, ’email’ and ‘can’ attributes for each user in the database. ‘can’ attribute is a custom generated field which is being used just to evaluate whether the user has permission to ‘edit articles’. The other variable which is named ‘can’ is passing on boolean value whether the logged-in user has permission to ‘publish articles’.

Now let’s generate view to render these passed on variables. Create a new vue file Index.vue in resources/js/Pages/Users folder and insert the following code:

<template>
    <app-layout>
        <div><h1>Can the logged-in user publish articles?  {{can}}</h1></div>
        <div class="">
            <table class="shadow-lg border m-4 rounded-xl">
                <thead>
                    <tr class="bg-indigo-100">
                        <th class="py-2 px-4 border">Name</th>
                        <th class="py-2 px-4 border">Email</th>
                        <th class="py-2 px-4 border">Can Edit Articles</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in data" :key="item.id">
                        <td class="py-2 px-4 border">{{item.name}}</td>
                        <td class="py-2 px-4 border">{{item.email}}</td>
                        <td class="py-2 px-4 border">{{item.can.edit_articles}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
 
 export default {
        components: {
            AppLayout,
        },
        props: ['data','can'],
    }
</script>

Finally, edit the routes/web.php as usual to insert index route of UserController:

// ...
use App\Http\Controllers\UserController;

// ...
Route::get('users', [UserController::class, 'index'])
    ->name('users')
    ->middleware('auth');

Now, enter following command to compile javascript assets:

npm run dev

Run the test server by entering following command:

php artisan serve

Now, you can access the URL localhost:8000/users which will render the permissions of users.