Setelah berhasil membuat component login, maka kita akan lanjutkan belajar membuat component logout.

Langakah 1 - Membuat Component Logout

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

        
go
        

            
        
     
php artisan make:livewire Auth/Logout

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:

1. Class Component: app/Livewire/Auth/Logout.php
2. View Component: resources/views/livewire/auth/logout.blade.php

Langkah 2 - Membuat Fungsi Logout

Setelah berhasil membuat component, maka kita akan menambahkan method untuk proses logout di dalam class component.

Silahkan teman-teman buka file app/Livewire/Auth/Logout.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

        
php
        

            
        
     
<?php

namespace App\Livewire\Auth;

use Livewire\Component;

class Logout extends Component
{
    /**
     * logout
     *
     * @return void
     */
    public function logout()
    {
        // logout
        auth()->guard('customer')->logout();

        // session flash
        session()->flash('success', 'Logout Berhasil');

        // redirect
        return $this->redirect('/login', navigate: true);
    }

    public function render()
    {
        return view('livewire.auth.logout');
    }
}

Di atas, kita menambahkan method baru dengan nama logout.

        
csharp
        

            
        
     
public function logout()
{

	//...
	
}

Di dalam method di atas, kita lakukan proses logout berdasarkan guard customer.

        
scss
        

            
        
     
// logout
auth()->guard('customer')->logout();

Kemudian kita buat session flash dan redirect ke halaman login.

        
kotlin
        

            
        
     
// session flash
session()->flash('success', 'Logout Berhasil');

// redirect
return $this->redirect('/login', navigate: true);

Langkah 3 - Membuat Button Logout

Setelah membuat method logout di dalam class component, maka kita lanjutkan membuat sebuah button di dalalm view, yang dimana di dalam button tersebut kita melakukan trigger ke method logout yang sudah buat di atas.

Silahkan teman-teman buka resources/views/livewire/auth/logout.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

        
xml
        

            
        
     
<a wire:click="logout" class="text-decoration-none btn-back mb-1" style="cursor: pointer">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
        class="bi bi-box-arrow-right fw-bold" viewBox="0 0 16 16">
        <path fill-rule="evenodd"
            d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z" />
        <path fill-rule="evenodd"
            d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z" />
    </svg>
</a>

Di atas, kita memanggil method logout menggunakan directive wire:click.

        
css
        

            
        
     
<a wire:click="logout" .....