added login and token refreshing

5 files changed, 68 insertions, 38 deletions

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index e6205c8..7491ea9 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { watch, ref } from "vue"
-import { RouterLink, useRoute } from "vue-router"
+import { watch, ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
 
 const requiresAuth = ref(true)
 const route = useRoute()
@@ -9,7 +9,7 @@ watch(
   async () => {
     requiresAuth.value = route.meta.isAuth
   }
-);
+)
 </script>
 
 <template>
diff --git a/src/main.ts b/src/main.ts
index f6d3ea7..2886300 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,9 +9,50 @@ import * as bootstrap from 'bootstrap'
 import 'vue-toast-notification/dist/theme-sugar.css'
 
 axios.defaults.baseURL = '/api'
-axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('authToken')}`
 axios.defaults.headers.post['Content-Type'] = 'application/json'
 
+axios.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('authToken')
+    if (token) {
+      config.headers['Authorization'] = 'Bearer ' + token
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+axios.interceptors.response.use(
+  (res) => {
+    return res;
+  },
+  async (err) => {
+    const originalConfig = err.config;
+
+    if (originalConfig.url !== "/auth/signin" && err.response) {
+      if (err.response.status === 401 && !originalConfig._retry) {
+        originalConfig._retry = true;
+
+        try {
+          const rs = await axios.post("/auth/refresh", {
+            RefreshToken: localStorage.getItem("refToken")
+          });
+
+          localStorage.setItem("authToken", rs.data.auth_token)
+
+          return axios(originalConfig);
+        } catch (_error) {
+          return Promise.reject(_error);
+        }
+      }
+    }
+
+    return Promise.reject(err);
+  }
+);
+
 const app = createApp(App)
 
 app.use(router)
diff --git a/src/router/index.ts b/src/router/index.ts
index af8e2c5..568bad8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,8 +64,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to, _, next) => {
-  if (to.meta.isAuth && !localStorage.getItem("authToken")) {
-    next("/login?redirected=true")
+  if (to.meta.isAuth && !localStorage.getItem('authToken')) {
+    next('/login?redirected=true')
   } else {
     next()
   }
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index fb9bdcd..77999f2 100644
--- a/src/views/LogIn.vue
+++ b/src/views/LogIn.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, toRaw } from "vue"
+import { ref, toRaw } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
-import axios from "axios"
+import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
 
 const toast = useToast({
@@ -11,8 +11,8 @@ const toast = useToast({
 const router = useRouter()
 
 const isLoading = ref(false)
-const email = ref("")
-const password = ref("")
+const email = ref('')
+const password = ref('')
 
 const login = async (e) => {
   e.preventDefault()
@@ -20,25 +20,25 @@ const login = async (e) => {
 
   try {
     const res = await axios.post('/auth/signin', {
-      "accountname": toRaw(email.value),
-      "password": toRaw(password.value),
-      "method": "email"
+      accountname: toRaw(email.value),
+      password: toRaw(password.value),
+      method: 'email'
     })
 
-    localStorage.setItem("authToken", res.data.auth_token)
-    localStorage.setItem("refToken", res.data.refresh_token)
+    localStorage.setItem('authToken', res.data.auth_token)
+    localStorage.setItem('refToken', res.data.refresh_token)
     toast.default(`Welcome, ${res.data.data.Username}`)
-    router.push({ path: "/" })
+    router.push({ path: '/' })
   } catch (err) {
     const statusCode = err.request.status
 
-    switch(statusCode) {
+    switch (statusCode) {
       case 401:
         toast.error('Password is incorrect')
-        break;
+        break
       case 404:
         toast.error('User does not exist')
-        break;
+        break
       default:
         toast.error('An unhandled exception occoured. Please check logs')
     }
@@ -116,7 +116,11 @@ const login = async (e) => {
         </div>
         -->
 
-        <button type="submit" class="btn btn-primary btn-block mb-4" :class="{ disabled: isLoading }">
+        <button
+          type="submit"
+          class="btn btn-primary btn-block mb-4"
+          :class="{ disabled: isLoading }"
+        >
           Sign In
           <div v-if="isLoading" class="spinner-border spinner-border-sm ms-1" role="status">
             <span class="sr-only"></span>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index b96a0d1..9c3089a 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -34,32 +34,17 @@ import { RouterLink } from 'vue-router'
     <div>
       <form>
         <div class="form-floating mb-4">
-          <input
-            id="login-username-input"
-            type="text"
-            class="form-control"
-            placeholder=""
-          />
+          <input id="login-username-input" type="text" class="form-control" placeholder="" />
           <label for="login-username-input">Username</label>
         </div>
 
         <div class="form-floating mb-4">
-          <input
-            id="login-email-input"
-            type="text"
-            class="form-control"
-            placeholder=""
-          />
+          <input id="login-email-input" type="text" class="form-control" placeholder="" />
           <label for="login-email-input">E-Mail</label>
         </div>
 
         <div class="form-floating mb-4">
-          <input
-            id="login-password-input"
-            type="password"
-            class="form-control"
-            placeholder=""
-          />
+          <input id="login-password-input" type="password" class="form-control" placeholder="" />
           <label for="login-password-input">Password</label>
         </div>