[feat] middleware

resources/js/components/NavigationComponent.vue

@@ -3,19 +3,22 @@ import { ref, provide } from "vue";
 import NavDesktop from "./NavDesktop.vue";
 import NavMobile from "./NavMobile.vue";
 import logo from "../../images/logo.png";
+import axios from "axios";
 
 const isOpen = ref(false);
 const isMobileMenuOpen = ref(false);
 const openDropdownIndex = ref(null);
 
 const items = [
-  { label: "Manajemen Produk", subItems: [
-    { label: "Brankas", route: "/brankas" },
-    { label: "Nampan", route: "/nampan" },
-    { label: "Produk", route: "/produk" },
-    { label: "Kategori", route: "/kategori" },
-    { label: "Sales", route: "/sales" },
-  ] },
+  {
+    label: "Manajemen Produk", subItems: [
+      { label: "Brankas", route: "/brankas" },
+      { label: "Nampan", route: "/nampan" },
+      { label: "Produk", route: "/produk" },
+      { label: "Kategori", route: "/kategori" },
+      { label: "Sales", route: "/sales" },
+    ]
+  },
   { label: "Kasir", route: "/kasir" },
   { label: "Laporan", route: "/laporan" },
   { label: "Akun", route: "/akun" },
@@ -41,8 +44,21 @@ const closeMobileMenu = () => {
   openDropdownIndex.value = null;
 };
 
-const logout = () => {
-  console.log("Logout clicked");
+const logout = async () => {
+  try {
+    await axios.post('/api/logout', {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    window.location.href = '/';
+  } catch (error) {
+    if (error.response && error.response.status === 401) {
+      window.location.href = '/';
+    } else {
+      console.error("Logout failed:", error);
+    }
+  }
   closeMobileMenu();
 };
 
@@ -69,10 +85,7 @@ provide('navigationData', {
     <NavMobile />
 
     <!-- Click Outside Handler for Desktop Dropdown -->
-    <div 
-      v-if="openDropdownIndex !== null && !isMobileMenuOpen"
-      @click="openDropdownIndex = null"
-      class="fixed inset-0 z-10"
-    ></div>
+    <div v-if="openDropdownIndex !== null && !isMobileMenuOpen" @click="openDropdownIndex = null"
+      class="fixed inset-0 z-10"></div>
   </div>
 </template>

resources/js/middlewares/auth.js

@@ -0,0 +1,9 @@
+export default function auth(to, from, next) {
+  const token = localStorage.getItem("token")
+
+  if (!token) {
+    next({ name: "Login" })
+  } else {
+    next()
+  }
+}

resources/js/middlewares/guest.js

@@ -0,0 +1,8 @@
+export default function guest(to, from, next) {
+  const token = localStorage.getItem("token")
+  if (token) {
+    next({ name: "Brankas" })
+  } else {
+    next()
+  }
+}

resources/js/middlewares/owner.js

@@ -0,0 +1,8 @@
+export default function owner(to, from, next) {
+  const role = localStorage.getItem("role")
+  if (role !== "owner") {
+    next({ name: "Kasir" })
+  } else {
+    next()
+  }
+}

resources/js/router/index.js

@@ -1,84 +1,124 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../pages/Home.vue'
-import Produk from '../pages/Produk.vue'
-import Brankas from '../pages/Brankas.vue'
-import Tray from '../pages/Tray.vue'
-import Kasir from '../pages/Kasir.vue'
-import InputProduk from '../pages/InputProduk.vue'
-import Kategori from '../pages/Kategori.vue'
-import Sales from '../pages/Sales.vue'
-import EditProduk from '../pages/EditProduk.vue'
-import Laporan from '../pages/Laporan.vue'
+import { createRouter, createWebHistory } from "vue-router";
 
-import Login from '../pages/Login.vue'
-
-import Akun from '../pages/Akun.vue'
+import Produk from "../pages/Produk.vue";
+import Brankas from "../pages/Brankas.vue";
+import Tray from "../pages/Tray.vue";
+import Kasir from "../pages/Kasir.vue";
+import InputProduk from "../pages/InputProduk.vue";
+import Kategori from "../pages/Kategori.vue";
+import Sales from "../pages/Sales.vue";
+import EditProduk from "../pages/EditProduk.vue";
+import Laporan from "../pages/Laporan.vue";
+import Login from "../pages/Login.vue";
+import Akun from "../pages/Akun.vue";
 
+import auth from "../middleware/auth";
+import guest from "../middleware/guest";
+import owner from "../middleware/owner";
 
+const middlewareMap = { auth, guest, owner };
 
 const routes = [
-  {
-    path: '/',
-    name: 'Login',
-    component: Login
-  },
-  {
-    path: '/produk',
-    name: 'Produk',
-    component: Produk
-  },
-  {
-    path: '/produk/baru',
-    name: 'ProdukBaru',
-    component: InputProduk
-  },
-  {
-    path: '/brankas',
-    name: 'Brankas',
-    component: Brankas
-  },
-  {
-    path: '/nampan',
-    name: 'Nampan',
-    component: Tray
-  },
-  {
-    path: '/kasir',
-    name: 'Kasir',
-    component: Kasir
-  },
-  {
-    path: '/kategori',
-    name: 'Kategori',
-    component: Kategori
-  },
-  {
-    path: '/sales',
-    name: 'Sales',
-    component: Sales
-  },
-  {
-    path: '/akun',
-    name: 'Akun',
-    component: Akun
-  },
-  {
-    path: '/produk/:id/edit',   // :id = parameter dinamis
-    name: 'EditProduk',
-    component: EditProduk,
-    props: true                 // biar id bisa langsung jadi props di komponen
-  },
-  {
-    path: '/laporan', 
-    name: 'EditProduk',
-    component: Laporan
-  }
-]
-
+    {
+        path: "/",
+        name: "Login",
+        component: Login,
+        meta: { middleware: "guest" },
+    },
+    {
+        path: "/produk",
+        name: "Produk",
+        component: Produk,
+        meta: { middleware: "auth" },
+    },
+    {
+        path: "/produk/baru",
+        name: "ProdukBaru",
+        component: InputProduk,
+        meta: { middleware: ["auth", "owner"] },
+    },
+    {
+        path: "/produk/:id/edit",
+        name: "EditProduk",
+        component: EditProduk,
+        props: true,
+        meta: { middleware: ["auth", "owner"] },
+    },
+    {
+        path: "/brankas",
+        name: "Brankas",
+        component: Brankas,
+        meta: { middleware: "auth" },
+    },
+    {
+        path: "/nampan",
+        name: "Nampan",
+        component: Tray,
+        meta: { middleware: "auth" },
+    },
+    {
+        path: "/sales",
+        name: "Sales",
+        component: Sales,
+        meta: { middleware: "auth" },
+    },
+    {
+        path: "/kategori",
+        name: "Kategori",
+        component: Kategori,
+        meta: { middleware: "auth" },
+    },
+    {
+        path: "/kasir",
+        name: "Kasir",
+        component: Kasir,
+        meta: { middleware: "auth" },
+    },
+    {
+        path: "/laporan",
+        name: "Laporan",
+        component: Laporan,
+        meta: { middleware: ["auth", "owner"] },
+    },
+    {
+        path: "/akun",
+        name: "Akun",
+        component: Akun,
+        meta: { middleware: ["auth", "owner"] },
+    },
+];
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes
-})
+    history: createWebHistory(),
+    routes,
+});
 
-export default router
+router.beforeEach((to, from, next) => {
+    let middlewares = to.meta.middleware;
+    if (!middlewares) return next();
+
+    if (!Array.isArray(middlewares)) {
+        middlewares = [middlewares];
+    }
+
+    let index = 0;
+    const run = () => {
+        const name = middlewares[index];
+        const mw = middlewareMap[name];
+        if (!mw) return next();
+
+        mw(to, from, (redirect) => {
+            if (redirect) return next(redirect); 
+            index++;
+            if (index < middlewares.length) {
+                run();
+            } else {
+                next();
+            }
+        });
+    };
+
+    run();
+});
+
+export default router;