AUTH VUE – BAGIAN 1
Login Page + Axios + Token Storage
STRUKTUR FILE (VUE)
Di folder vue-berita:
src/
├─ views/
│ └─ Login.vue
├─ router/
│ └─ index.js
├─ services/
│ └─ api.js
└─ main.js
1️⃣ INSTALL AXIOS (PASTIKAN DI FOLDER vue-berita)
npm install axios
📌 Jalankan di folder vue-berita, bukan root Laravel.
2️⃣ Axios Instance (services/api.js)
📂 src/services/api.js
import axios from 'axios'
const api = axios.create({
baseURL: 'http://127.0.0.1:8000/api',
})
// otomatis kirim token
api.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
export default api
✅ Best practice
✅ Token otomatis dikirim
✅ Tidak perlu set header manual
3️⃣ Halaman Login (views/Login.vue)
📂 src/views/Login.vue
<template>
<div class="login">
<h2>Login</h2>
<form @submit.prevent="login">
<input
type="email"
v-model="email"
placeholder="Email"
required
/>
<input
type="password"
v-model="password"
placeholder="Password"
required
/>
<button type="submit">Login</button>
<p v-if="error" style="color:red">{{ error }}</p>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue'
import api from '../services/api'
import { useRouter } from 'vue-router'
const email = ref('')
const password = ref('')
const error = ref('')
const router = useRouter()
const login = async () => {
try {
const res = await api.post('/login', {
email: email.value,
password: password.value
})
localStorage.setItem('token', res.data.token)
localStorage.setItem('user', JSON.stringify(res.data.user))
router.push('/tambah')
} catch (err) {
error.value = 'Email atau password salah'
}
}
</script>
🎯 Fungsi:
- Kirim login ke Laravel
- Simpan token
- Redirect ke halaman protected
4️⃣ Vue Router (router/index.js)
📂 src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{ path: '/', component: ListBerita },
{ path: '/tambah', component: FormBerita,
meta: { requiresAuth: true }
},
{ path: '/login', component: Login },
]
const router = createRouter({
history: createWebHistory(),
routes
})
// ROUTER GUARD
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requiresAuth && !token) {
next('/login')
} else {
next()
}
})
export default router
🔐 Ini inti SPA Auth
- Tanpa token → lempar ke
/login - Dengan token → boleh masuk
5️⃣ main.js
📂 src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
6️⃣ Test Flow (WAJIB URUT)
1️⃣ Jalankan Laravel
php artisan serve
2️⃣ Jalankan Vue
npm run dev
3️⃣ Buka:
http://localhost:5173/login
4️⃣ Login pakai user Laravel
5️⃣ Berhasil → otomatis ke /berita
✅ JIKA BERHASIL
- Token tersimpan di
localStorage - Request API pakai Authorization Bearer
- Halaman berita terkunci
🎉 AUTH FRONTEND SELESAI
Catatan Materi
Vue SPA menggunakan token-based authentication.
Token disimpan di localStorage dan dikirim otomatis lewat Axios interceptor.
