Tutorial Laravel Passport dan Vue Js 3 #7 : Proses Login


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil melakukan proses register data user baru menggunakan Laravel sebagai BackEnd dan Vue Js sebagai FrontEnd. Di artikel kali ini kita semua akan belajar untuk mengimplementasikan proses login di dalam Vue Js.

Langkah 1 - Edit View Login

Sekarang, kita akan melakukan perubahan di dalam view/component login. Silahkan buka file src/views/auth/Login.vue dan ubah kode-nya menjadi seperti berikut ini :

<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>

Di atas, pertama kita import Reactivity API dari Vue, yaitu reactive dan ref, ini akan digunakan untuk membuat sebuah state/variable menjadi reaktif.

mport { reactive, ref } from 'vue'

Setelah itu, kita import hook useRouter dari Vue Router, ini digunakan agar kita dapat menggunakan Vue Router di dalam Composition API.

import { useRouter } from 'vue-router'

Kemudian, kita import Axios, ini akan digunakan untuk melakukan HTTP request ke server / REST API.

import axios from 'axios'

Untuk menginisialisasi Composition API di dalam component, kita menggunakan kode seperti berikut ini :

setup() {

	// ...
	
}

Dengan Composition API, maka semua kode akan di tulis di dalam method setup.

Di dalam Composition API, pertama kita melakukan inisialisasi Vue Router.

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

Setelah itu, kita buat state user, ini akan digunakan untuk menampung data yang di masukkan dari form dan state ini menggunakan jenis reactive.

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

Kemudian, kita juga buat state lagi dengan nama validation dan jenis yang akan kita gunakan dalam state ini adalah ref. State ini akan di assign sebuah response error yang di dapatkan dari server.

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

Dan kita juga buat state untuk menampilkan alert jika gagal melakukan proses login.

//state loginFailed
const loginFailed = ref(null)

CATATAN:

Jika menggunakan reactivity API ref di dalam function setup, maka untuk set dan get data harus menggunakan single objek .value.

Tapi untuk menampilkan di template kita tidak perlu menggunakan single object .value.

Selanjutnya, kita buat function/method yang bernama login, method ini akan di jalankan ketika kita melakukan submit form login.

//method login
function login() {

	// ...
	
}

Di dalam method login kita melakukan send data ke server berupa email dan password.

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

Jika data di temukan, maka kita akan membuat localStorage dengan nama token dan isinya kita ambil dari hasil response yang di dapatkan dari REST API. Setelah itu akan di arahkan ke halaman dashboard.

if(response.data.success) {

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

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

Jika data tidak ditemukan di server, maka kita akan mengubah nilai state loginFailed menjadi true.

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

Dan untuk menampilkanya di dalam template, kita menggunakan kode seperti berikut ini :

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

Dan terakhir, jangan lupa untuk melakukan return semua state dan function/method yang ada di dalam Composition API.

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

Langkah 2 - Uji Coba Proses Login

Sekarang, kita akan uji coba proses login, silahkan buka di http://localhost:8080/login jika berhasil maka tampilannya seperti berikut ini :

Sekarang, silahkan klik LOGIN tanpa mengisi data apapun, maka kita akan mendapatkan error validasi message seperti berikut ini :

Dan jika kita masukkan email dan password yang tidak tersedia di database, maka kita akan mendapatkan message login failed, kurang lebih seperti berikut ini :

Sekarang, kita coba memasukkan email dan password yang ada di dalam database, maka kita akan di arahkan ke halaman dashboard.

Dan jika kita cek pada tab Application > Local Storage, maka data token kita berhasil di simpan.

Di atas, kita sudah berhasil melakukan proses login di dalam Vue Js. Di artikel selanjutnya kita akan belajar untuk mengubah halaman dashboard dan membuat fungsi logout.

Terima Kasih


EBOOK - Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR