Panduan praktis dan terstruktur mengenai panduan laravel sanctum dan vue js authentication: proses authentication (part 7) berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan Laravel Sanctum Dan Vue Js Authentication: Proses Authentication (Part 7) Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.
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="login">
<div class="container" style="margin-top:100px">
<div class="row justify-content-center">
<div class="col-md-5">
<div v-if="loginFailed" class="alert alert-danger">
Email atau Password Anda salah.
</div>
<div class="card">
<div class="card-body">
LOGIN
<hr>
<form @submit.prevent="login">
<div class="form-group">
<label>EMAIL</label>
<input type="email" class="form-control" v-model="user.email"
placeholder="Masukkan Email">
<div v-if="validation.email" class="mt-2 alert alert-danger">
Masukkan Email
</div>
</div>
<div class="form-group">
<label>PASSWORD</label>
<input type="password" class="form-control" v-model="user.password"
placeholder="Masukkan Password">
<div v-if="validation.password" class="mt-2 alert alert-danger">
Masukkan Password
</div>
</div>
<button type="submit" class="btn btn-primary">LOGIN</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Login',
data() {
return {
//state loggedIn with localStorage
loggedIn: localStorage.getItem('loggedIn'),
//state token
token: localStorage.getItem('token'),
//state user
user: [],
//state validation
validation: [],
//state login failed
loginFailed: null
}
},
methods: {
login() {
if (this.user.email && this.user.password) {
axios.get('http://localhost:8000/sanctum/csrf-cookie')
.then(response => {
//debug cookie
console.log(response)
axios.post('http://localhost:8000/api/login', {
email: this.user.email,
password: this.user.password
}).then(res => {
//debug user login
console.log(res)
if (res.data.success) {
//set localStorage
localStorage.setItem("loggedIn", "true")
//set localStorage Token
localStorage.setItem("token", res.data.token)
//change state
this.loggedIn = true
//redirect dashboard
return this.$router.push({ name: 'dashboard' })
} else {
//set state login failed
this.loginFailed = true
}
}).catch(error => {
console.log(error)
})
})
}
this.validation = []
if (!this.user.email) {
this.validation.email = true
}
if (!this.user.password) {
this.validation.password = true
}
}
},
//check user already logged in
mounted() {
if (this.loggedIn) {
return this.$router.push({ name: 'dashboard' })
}
}
}
</script>Tahap 2: Penulisan Kode & Konfigurasi
import axios from 'axios'Tahap 3: Penulisan Kode & Konfigurasi
//state loggedIn with localStorage
loggedIn: localStorage.getItem('loggedIn'),Tahap 4: Penulisan Kode & Konfigurasi
//state token
token: localStorage.getItem('token'),Tahap 5: Penulisan Kode & Konfigurasi
//state user
user: [],Tahap 6: Penulisan Kode & Konfigurasi
//state validation
validation: [],Tahap 7: Penulisan Kode & Konfigurasi
//state login failed
loginFailed: nullTahap 8: Penulisan Kode & Konfigurasi
axios.get('http://localhost:8000/sanctum/csrf-cookie')Tahap 9: Penulisan Kode & Konfigurasi
axios.post('http://localhost:8000/api/login', {
email: this.user.email,
password: this.user.password
})Tahap 10: Penulisan Kode & Konfigurasi
if (res.data.success) {
//set localStorage
localStorage.setItem("loggedIn", "true") // <— set localStorage loggedIn menjadi true
//set localStorage Token
localStorage.setItem("token", res.data.token) // <— simpan token dari response ke dalam localStorage token
//change state
this.loggedIn = true // <— ubah state atau properti loggedIn menjadi true
//redirect dashboard
return this.$router.push({ name: 'dashboard' }) // <— redirect ke route atau halaman dashboard
}Tahap 11: Penulisan Kode & Konfigurasi
<div v-if="loginFailed" class="alert alert-danger">
Email atau Password Anda salah.
</div>Tahap 12: Penulisan Kode & Konfigurasi
this.validation = []
if (!this.user.email) {
this.validation.email = true
}
if (!this.user.password) {
this.validation.password = true
}Tahap 13: Penulisan Kode & Konfigurasi
<div v-if="validation.email" class="mt-2 alert alert-danger">
Masukkan Email
</div>Tahap 14: Penulisan Kode & Konfigurasi
<div v-if="validation.password" class="mt-2 alert alert-danger">
Masukkan Password
</div>Tahap 15: Penulisan Kode & Konfigurasi
npm run serve
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
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!
