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