token authorization

src/components/Dashboard.vue

@@ -1,12 +1,42 @@
 <template>
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+  />
   <div class="top-0 fixed w-full">
     <Navbar />
   </div>
+  <button @click="doLogout" type="submit" class="btn btn-primary">
+    Logout
+  </button>
   <div class="flex justify-center mt-3 overflow-x-auto">
     <Card msg="Ar-Rahn Kota Bharu 2" />
     <Card msg="Ar-Rahn One Stop" />
     <Card msg="Ar-Rahn Rantau Panjang" />
   </div>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-6 bg-white text-center">
+        <p>Karat Semasa</p>
+        <table class="table table-bordered table-hover margin-auto">
+          <thead class="thead-dark">
+            <tr>
+              <th>#</th>
+              <th>Karat</th>
+              <th>Keterangan</th>
+            </tr>
+          </thead>
+          <tbody v-for="karats in karat" :key="karats.id">
+            <tr>
+              <td scope="row">{{ karats.id }}</td>
+              <td scope="row">{{ karats.karat }}</td>
+              <td scope="row">{{ karats.keterangan }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
   <!-- <Accordion /> -->
 
   <!-- <Footer /> -->
@@ -17,6 +47,7 @@ import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
 import Card from "./dashboard/Card.vue";
 import Accordion from "./dashboard/Accordion.vue";
+import axios from "axios";
 
 export default {
   name: "Dashboard",
@@ -26,5 +57,46 @@ export default {
     Footer,
     Accordion,
   },
+  data() {
+    return {
+      karat: Array,
+    };
+  },
+  created() {
+    this.getKarat();
+  },
+  methods: {
+    doLogout() {
+      axios
+        .post(
+          "/user/logout",
+          {},
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          localStorage.removeItem("token");
+          this.$router.push("/login");
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+
+    async getKarat() {
+      await axios
+        .get("/jeniskarat")
+        .then((response) => {
+          this.karat = response.data.karat;
+          console.log(this.karat);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
 };
 </script>

src/components/Login.vue

@@ -176,8 +176,8 @@ export default {
   },
   methods: {
     doLogin() {
-      axios.post("user/login", this.form).then((response) => {
-        localStorage.setItem("token", response.data);
+      axios.post("/user/login", this.form).then((response) => {
+        localStorage.setItem("token", response.data.token);
         this.$router.push("/");
       });
     },

src/interceptors/axios.js

@@ -1,3 +1,3 @@
 import axios from "axios";
 
-axios.defaults.baseURL = "http://lelong.test/api/";
+axios.defaults.baseURL = "http://lelong.test/api";

src/router/index.js

@@ -23,12 +23,6 @@ const routes = [
         meta: { guest: true }
 
     },
-    // {
-    //     path: '/',
-    //     name: 'Home',
-    //     component: HelloWorld,
-    //     meta: { requiresAuth: true },
-    // },
     {
         path: '/',
         name: 'Dashboard',
@@ -40,16 +34,22 @@ const routes = [
         path: '/cart',
         name: 'Cart',
         component: Cart,
+        meta: { requiresAuth: true }
+
     },
     {
         path: '/list',
         name: 'List',
         component: List,
+        meta: { requiresAuth: true }
+
     },
     {
         path: '/pay',
         name: 'Pay',
         component: Pay,
+        meta: { requiresAuth: true }
+
     }
 
 ]
@@ -67,8 +67,8 @@ router.beforeEach((to, from, next) => {
     if (to.matched.some(record => record.meta.requiresAuth)) {
         if (!loggedIn()) {
             next({
-                path: '/login',
-                query: { redirect: to.fullPath },
+                // path: '/login',
+                // query: { redirect: to.fullPath },
             })
         }
         else {