Di folder vue-berita<\/strong>:<\/p>\n\n\n\n 📌 Jalankan di folder 📂 ✅ Best practice 📂 🎯 Fungsi:<\/p>\n\n\n\n 📂 🔐 Ini inti SPA Auth<\/strong><\/p>\n\n\n\n 📂 1️⃣ Jalankan Laravel<\/p>\n\n\n\n 2️⃣ Jalankan Vue<\/p>\n\n\n\n 3️⃣ Buka:<\/p>\n\n\n\n 4️⃣ Login pakai user Laravel<\/p>\n\n\n\n 5️⃣ Berhasil \u2192 otomatis ke 🎉 AUTH FRONTEND SELESAI<\/strong><\/p>\n\n\n\n Vue SPA menggunakan token-based authentication. edit ListBerita.vue dan tambahkan script logout berikut di dalam tag <template> : <\/p>\n<\/blockquote>\n\n\n\n berikutnya tambahkan juga function untuk logoutnya didalam tag <script> :<\/p>\n<\/blockquote>\n\n\n\n Web POS (Point of Sale) adalah aplikasi berbasis web yang digunakan untuk mengelola transaksi penjualan di toko, kafe, restoran, atau bisnis retail lainnya. Sistem ini membantu kasir dalam mencatat penjualan, mengelola stok barang, mencetak struk, hingga membuat laporan penjualan secara otomatis. Karena berbasis web, POS dapat diakses dari browser tanpa instalasi, dapat digunakan di berbagai perangkat seperti laptop, tablet, atau komputer kasir.<\/p>\n","protected":false},"author":1,"featured_media":824,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,38],"tags":[35,140,141,142,22,138,139,143,144],"class_list":["post-1544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-framework-laravel","category-tutorial-programming","tag-laravel-controller","tag-laravel-model","tag-laravel-route","tag-laravel-view-blade","tag-php-framework","tag-tutorial-laravel-12","tag-tutorial-laravel-migrate","tag-tutorial-laravel-mysql","tag-web-berita-laravel"],"yoast_head":"\nsrc\/\n \u251c\u2500 views\/\n \u2502 \u2514\u2500 Login.vue\n \u251c\u2500 router\/\n \u2502 \u2514\u2500 index.js\n \u251c\u2500 services\/\n \u2502 \u2514\u2500 api.js\n \u2514\u2500 main.js\n<\/code><\/pre>\n\n\n\n
\n\n\n\n1️⃣ INSTALL AXIOS (PASTIKAN DI FOLDER vue-berita)<\/h2>\n\n\n\n
npm install axios\n<\/code><\/pre>\n\n\n\nvue-berita<\/code><\/strong>, bukan root Laravel.<\/p>\n\n\n\n
\n\n\n\n2️⃣ Axios Instance (services\/api.js)<\/h2>\n\n\n\n
src\/services\/api.js<\/code><\/p>\n\n\n\nimport axios from 'axios'\n\nconst api = axios.create({\n baseURL: 'http:\/\/127.0.0.1:8000\/api',\n})\n\n\/\/ otomatis kirim token\napi.interceptors.request.use(config => {\n const token = localStorage.getItem('token')\n if (token) {\n config.headers.Authorization = `Bearer ${token}`\n }\n return config\n})\n\nexport default api\n<\/code><\/pre>\n\n\n\n
✅ Token otomatis dikirim
✅ Tidak perlu set header manual<\/p>\n\n\n\n
\n\n\n\n3️⃣ Halaman Login (views\/Login.vue)<\/h2>\n\n\n\n
src\/views\/Login.vue<\/code><\/p>\n\n\n\n<template>\n <div class=\"login\">\n <h2>Login<\/h2>\n\n <form @submit.prevent=\"login\">\n <input\n type=\"email\"\n v-model=\"email\"\n placeholder=\"Email\"\n required\n \/>\n\n <input\n type=\"password\"\n v-model=\"password\"\n placeholder=\"Password\"\n required\n \/>\n\n <button type=\"submit\">Login<\/button>\n\n <p v-if=\"error\" style=\"color:red\">{{ error }}<\/p>\n <\/form>\n <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue'\nimport api from '..\/services\/api'\nimport { useRouter } from 'vue-router'\n\nconst email = ref('')\nconst password = ref('')\nconst error = ref('')\nconst router = useRouter()\n\nconst login = async () => {\n try {\n const res = await api.post('\/login', {\n email: email.value,\n password: password.value\n })\n\n localStorage.setItem('token', res.data.token)\n localStorage.setItem('user', JSON.stringify(res.data.user))\n\n router.push('\/tambah')\n } catch (err) {\n error.value = 'Email atau password salah'\n }\n}\n<\/script>\n<\/code><\/pre>\n\n\n\n\n
\n\n\n\n4️⃣ Vue Router (router\/index.js)<\/h2>\n\n\n\n
src\/router\/index.js<\/code><\/p>\n\n\n\nimport { createRouter, createWebHistory } from 'vue-router'\nimport Login from '..\/views\/Login.vue'\n\nconst routes = [\n{ path: '\/', component: ListBerita },\n{ path: '\/tambah', component: FormBerita,\n meta: { requiresAuth: true }\n},\n{ path: '\/login', component: Login },\n]\n\nconst router = createRouter({\n history: createWebHistory(),\n routes\n})\n\n\/\/ ROUTER GUARD\nrouter.beforeEach((to, from, next) => {\n const token = localStorage.getItem('token')\n\n if (to.meta.requiresAuth && !token) {\n next('\/login')\n } else {\n next()\n }\n})\n\nexport default router\n<\/code><\/pre>\n\n\n\n\n
\/login<\/code><\/li>\n\n\n\n
\n\n\n\n5️⃣ main.js<\/h2>\n\n\n\n
src\/main.js<\/code><\/p>\n\n\n\nimport { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport router from '.\/router'\n\ncreateApp(App)\n .use(router)\n .mount('#app')\n<\/code><\/pre>\n\n\n\n
\n\n\n\n6️⃣ Test Flow (WAJIB URUT)<\/h2>\n\n\n\n
php artisan serve\n<\/code><\/pre>\n\n\n\nnpm run dev\n<\/code><\/pre>\n\n\n\nhttp://localhost:5173\/login\n<\/code><\/pre>\n\n\n\n\/berita<\/code><\/p>\n\n\n\n
\n\n\n\n✅ JIKA BERHASIL<\/h2>\n\n\n\n
\n
localStorage<\/code><\/li>\n\n\n\n
\n\n\n\nCatatan Materi <\/h2>\n\n\n\n
\n
Token disimpan di localStorage dan dikirim otomatis lewat Axios interceptor.<\/p>\n<\/blockquote>\n\n\n\nTambahan Fitur Logout<\/h2>\n\n\n\n
\n
<div>\n <button v-if=\"isLogin\" @click=\"logout\">Logout<\/button>\n<\/div><\/code><\/pre>\n\n\n\n\n
const isLogin = ref(false)\n\nonMounted(() => {\n isLogin.value = !!localStorage.getItem('token')\n})\n\nconst logout = async () => {\n try {\n await api.post('\/logout')\n } catch (e) {}\n\n localStorage.removeItem('token')\n localStorage.removeItem('user')\n\n isLogin.value = false\n router.push('\/login')\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"