fix bug auth

components/nav.vue

 <template>
-<div>
+  <div>
     <b-navbar toggleable="lg" type="dark" variant="info">
       <b-navbar-brand href="#">NavBar</b-navbar-brand>
 
@@ -14,8 +14,14 @@
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
           <b-nav-form>
-          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
-          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+            <b-form-input
+              size="sm"
+              class="mr-sm-2"
+              placeholder="Search"
+            ></b-form-input>
+            <b-button size="sm" class="my-2 my-sm-0" type="submit"
+              >Search</b-button
+            >
           </b-nav-form>
 
           <b-nav-item-dropdown text="Lang" right>
@@ -36,27 +42,18 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
-</div>
-       
-    
+  </div>
 </template>
 <script>
 export default {
-    name: 'nav'
-}
-
+  name: "nav",
+};
 </script>
 
 <script>
-const token = localStorage.getItem('bgcolor');
+const token_access = localStorage.getItem("token");
 export default {
   name: "logout",
-    data() {
-        return {
-            users: [],
-        }
-    },
-  
   methods: {
     logout() {
       fetch("http://127.0.0.1:8000/api/logout", {
@@ -65,13 +62,14 @@ export default {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-			  bearer_token: token,
+          token: token_access,
         }),
       });
-	  this.$router.push('/');
+      localStorage.removeItem("token");
+      this.$router.push("/");
     },
   },
-};</script>
+};
+</script>
 
-<style>
-</style>
+<style></style>
\ No newline at end of file

components/notification.vue

+<template>
+    <div class="notification is-danger bg-danger">
+      {{ message }}
+    </div>
+  </template>
+  
+  <style>
+    .notification {
+      padding: 11px;
+      margin: 10px 0px;
+    }
+  </style>
+  
+  <script>
+    export default {
+      name: 'Notification',
+      props: ['message']
+    }
+  </script>
\ No newline at end of file

middleware/web.js

+const token_access = localStorage.getItem('token');
+export default function () {
+   if (!token_access) {
+    // this.$router.push('/')
+    console.log('[LOG]: running ...')
+   }
+ }
\ No newline at end of file

nuxt.config.js

@@ -44,11 +44,20 @@ export default {
     '@nuxtjs/axios',
     '@nuxtjs/auth-next',
   ],
+  axios: {
+    baseURL: process.env.API_URL || ' http://localhost:8000/api/',
+    debug: process.env.DEBUG || false,
+    proxyHeaders: false,
+    credentials: false,
+  },
   auth: {
-    // Options
+
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
+  },
+  router: {
+    middleware: 'web'
   }
 }

package.json

 {
-  "name": "KiaiSoft_Tuan_Anh",
+  "name": "kiaisoft_tuan_anh",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
-    "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/axios": "^5.0.0",
     "axios": "^1.2.1",
     "bootstrap": "^4.6.2",
     "bootstrap-vue": "^2.23.1",
@@ -26,5 +26,14 @@
   "devDependencies": {
     "sass": "^1.57.1",
     "sass-loader": "^10.4.1"
-  }
+  },
+  "description": "## Build Setup",
+  "main": "nuxt.config.js",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }

pages/home/index.vue

@@ -38,6 +38,12 @@ export default {
 //   <script>
 // console.log(data);
  </script>
+ 
+ <script>
+ export default {
+  middleware: "web"
+ }
+</script>
   <style>
   </style>
   

pages/index.vue

 <template>
   <div>
+    <Notification :message="error" v-if="error"/>
     <div
       class="container"
       style="
@@ -39,51 +40,29 @@
 
 <script>
 import Nav from "@/components/Nav";
+import Notification from '@/components/Notification';
+
 
 export default {
   components: { Nav },
+  components: {Notification}
 };
 </script>
 <script>
 import { reactive } from "vue";
-
-// export default {
-//   name: 'login',
-//   setup() {
-//     const data = reactive({
-//       email: '',
-//       password: '',
-//       checked: ''
-
-//     });
-
-//     const submit = async () => {
-//       await fetch('http://localhost:3000/api/', {
-//         method: 'POST',
-//         headers: {'Content-Type': 'application/json'},
-//         credentials: 'include',
-//         body: JSON.stringify(data)
-//       });
-
-//       await router.push('/');
-
-//     }
-//     return {
-//       data,
-//       submit
-//     }
-//   }
-// }
+import axios from 'axios';
 export default {
   data: () => {
     return {
       email: "",
       password: "",
+      error: null
     };
   },
   methods: {
    async login() {
-     var resp = await  fetch("http://127.0.0.1:8000/api/login", {
+    try {
+     const resp = await  fetch("http://127.0.0.1:8000/api/login", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -94,16 +73,37 @@ export default {
         }),
       }).then((response) => {
       return response.json();
-      if(resp.data.bearer_token){
      
-      this.$router.push('home');
-}
     });
-    console.log(resp.data.bearer_token)
-    // localStorage.setItem('bgcolor',  resp.data.bearer_token);
-    await this.$auth.setToken('local', "Bearer " + resp.data.bearer_token);
-    await this.$auth.setRefreshToken('local', resp.data.refresh);
-    await this.$auth.setUserToken(resp.data.access);
+    console.log(resp.status);
+    localStorage.setItem('token',  resp.data.bearer_token);
+    if(resp.status == "success"){
+
+    this.$router.push('home')
+    } 
+    } catch (e) {
+      this.error = 'Username or Password not valid'
+    }
+
+    
+    
+
+// async login() {
+//         try {
+//           const response = await this.$axios.post('http://127.0.0.1:8000/api/login', {
+//             email: this.email,
+//             password: this.password
+//           });
+
+//           await this.$auth.setToken('local', "Bearer " + response.data.access);
+//           await this.$auth.setRefreshToken('local', response.data.refresh);
+//           await this.$auth.setUserToken(response.data.access);
+//         } catch (e) {
+//           this.error = 'Username or Password not valid'
+//         }
+      
+    
+    
 
     
      },

pages/register.vue

 <template>
-    <div class="container"
+  <div
+    class="container"
     style="
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
-      ">
+    "
+  >
     <div id="form-group">
       <form @submit.prevent="signin">
         <label>Name :</label>
-            <input type="text" class="form-control"
-            placeholder="name" v-model="name" max="255" min="1"  required>
+        <input
+          type="text"
+          class="form-control"
+          placeholder="name"
+          v-model="name"
+          max="255"
+          min="1"
+          required
+        />
         <label>Email :</label>
-            <input type="email" class="form-control"
-            placeholder="Email" v-model="email"  required>
+        <input
+          type="email"
+          class="form-control"
+          placeholder="Email"
+          v-model="email"
+          required
+        />
 
         <label>Password :</label>
-            <input type="password"
+        <input
+          type="password"
           class="form-control"
-            placeholder="password" v-model="password" required> 
+          placeholder="password"
+          v-model="password"
+          required
+        />
         <label>Confirm Password :</label>
-            <input type="password"
+        <input
+          type="password"
           class="form-control"
-            placeholder="Confirm_password" required>           
+          placeholder="Confirm_password"
+          required
+        />
         <div class="button">
-            <button class="w-75 btn btn-lg btn-primary" type="submit">Sign up here</button>
+          <button class="w-75 btn btn-lg btn-primary" type="submit">
+            Sign up here
+          </button>
         </div>
-         
       </form>
     </div>
-</div>
-    </template>
+  </div>
+</template>
 
 <script>
 import { reactive } from "vue";
@@ -56,7 +78,7 @@ export default {
           password: this.password,
         }),
       });
-	  this.$router.push('/');
+      this.$router.push("/");
     },
   },
 };
@@ -79,5 +101,5 @@ export default {
   justify-content: center;
   margin-left: 20px;
   margin-top: 5px;
-;}
+}
 </style>