Proses Login Di Laravel Passport Dan Vue Js 3 — Part 7

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

<template>

    <div class="container-fluid mt-5">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div v-if="loginFailed" class="alert alert-danger">
                        Email atau Password Anda salah.
                    </div>
                <div class="card border-0 rounded shadow">
                    <div class="card-body">
                        <h4>LOGIN</h4>
                        <hr>
                        <form @submit.prevent="login">
                            <div class="form-group">
                                <label>Email address</label>
                                <input type="email" v-model="user.email" class="form-control"
                                    placeholder="Email Address">
                            </div>
                            <div v-if="validation.email" class="mt-2 alert alert-danger">
                                {{ validation.email[0] }}
                            </div>

                            <div class="form-group">
                                <label>Password</label>
                                <input type="password" v-model="user.password" class="form-control"
                                    placeholder="Password">
                            </div>
                            <div v-if="validation.password" class="mt-2 alert alert-danger">
                                {{ validation.password[0] }}
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">LOGIN</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import { reactive, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import axios from 'axios'

    export default {

        setup() {

            //inisialisasi vue router on Composition API
            const router = useRouter()

            //state user
            const user = reactive({
                email: '',
                password: '',
            })

            //state validation
            const validation = ref([])

            //state loginFailed
            const loginFailed = ref(null)

            //method login
            function login() {

                //define variable 
                let email = user.email
                let password = user.password

                //send server with axios
                axios.post('http://localhost:8000/api/login', {
                        email,
                        password,
                })
                .then(response => {

                    if(response.data.success) {

                        //set token
                        localStorage.setItem('token', response.data.token)

                        //redirect ke halaman dashboard
                        return router.push({
                            name: 'dashboard'
                        })
                    }

                    //set state loggedIn to true
                    loginFailed.value = true


                }).catch(error => {
                    //set validation dari error response
                    validation.value = error.response.data
                })

            }

            return {
                user,           // <-- state user
                validation,     // <-- state validation 
                loginFailed,    // <-- state loggedIn
                login           // <-- method login
            }

        }

    }
</script>

Tahap 2: Penulisan Kode & Konfigurasi

mport { reactive, ref } from 'vue'

Tahap 3: Penulisan Kode & Konfigurasi

import { useRouter } from 'vue-router'

Tahap 4: Penulisan Kode & Konfigurasi

import axios from 'axios'

Tahap 5: Penulisan Kode & Konfigurasi

setup() {

	// ...
	
}

Tahap 6: Penulisan Kode & Konfigurasi

//inisialisasi vue router on Composition API
const router = useRouter()

Tahap 7: Penulisan Kode & Konfigurasi

//state user
const user = reactive({
   email: '',
   password: '',
})

Tahap 8: Penulisan Kode & Konfigurasi

//state validation
const validation = ref([])

Tahap 9: Penulisan Kode & Konfigurasi

//state loginFailed
const loginFailed = ref(null)

Tahap 10: Penulisan Kode & Konfigurasi

//method login
function login() {

	// ...
	
}

Tahap 11: Penulisan Kode & Konfigurasi

//send server with axios
axios.post('http://localhost:8000/api/login', {
   email,
   password,
})

Tahap 12: Penulisan Kode & Konfigurasi

if(response.data.success) {

   //set token
   localStorage.setItem('token', response.data.token)

   //redirect ke halaman dashboard
   return router.push({
      name: 'dashboard'
   })
}

Tahap 13: Penulisan Kode & Konfigurasi

//set state loggedIn to true
loginFailed.value = true

Tahap 14: Penulisan Kode & Konfigurasi

<div v-if="loginFailed" class="alert alert-danger">
   Email atau Password Anda salah.
</div>

Tahap 15: Penulisan Kode & Konfigurasi

return {
   user,           // <-- state user
   validation,     // <-- state validation 
   loginFailed,    // <-- state loggedIn
   login           // <-- method login
}

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!