Improved: handling of token in the response(#14)

src/api/index.ts

@@ -7,18 +7,33 @@ import { StatusCodes } from "http-status-codes";
 import router from "@/router"
 
 axios.interceptors.request.use((config: any) => {
+  // TODO: pass csrf token
   const token = store.getters["user/getUserToken"];
   if (token) {
-    config.headers.Authorization =  "Bearer " + token;
+    config.headers["api_key"] =  token;
     config.headers["Content-Type"] = "application/json";
   }
+
   return config;
 });
 
 // TODO: need to update this as per the changes in the Moqui response format, if required.
 axios.interceptors.response.use(function (response) {
   // Any status code that lie within the range of 2xx cause this function to trigger
   // Do something with response data
+
+  // TODO: explore more on a secure way to store the csrf token
+  // Cannot store it in cookies or localStorage as its not safe
+  // https://stackoverflow.com/questions/67062876/is-it-secure-to-store-a-csrf-token-value-in-the-dom
+  // https://stackoverflow.com/questions/62289684/what-is-the-correct-way-for-a-client-to-store-a-csrf-token
+  const csrfToken = response.headers["x-csrf-token"]
+  const meta = document.createElement("meta")
+  meta.name = "csrf"
+  meta.content = csrfToken
+  document.getElementsByTagName("head")[0].appendChild(meta)
+
+  document.cookie = `x-csrf-token=${csrfToken}`
+
   return response;
 }, function (error) {
   // TODO Handle it in a better way
@@ -66,7 +81,8 @@ const api = async (customConfig: any) => {
     url: customConfig.url,
     method: customConfig.method,
     data: customConfig.data,
-    params: customConfig.params
+    params: customConfig.params,
+    // withCredentials: true
   }
 
   const baseURL = store.getters["user/getInstanceUrl"];

src/store/modules/user/actions.ts

@@ -23,20 +23,19 @@
           return resp.data;
         } else if (hasError(resp)) {
           showToast(translate("Sorry, your username or password is incorrect. Please try again."));
           console.error("error", resp.data._ERROR_MESSAGE_);
           return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
         }
       } else {
         showToast(translate("Something went wrong"));
         console.error("error", resp.data._ERROR_MESSAGE_);
         return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
       }
     } catch (err: any) {
       showToast(translate("Something went wrong"));
       console.error("error", err);
       return Promise.reject(new Error(err))
     }
-    // return resp
   },
 
   /**

src/views/BrokeringRuns.vue

@@ -26,8 +26,8 @@
               {{ "Description" }}
             </ion-item>
             <ion-item>
-              {{ "<Frequency>" }}
-              {{ "<Runtime>" }}
+              <ion-label>{{ "<Frequency>" }}</ion-label>
+              <ion-label slot="end">{{ "<Runtime>" }}</ion-label>
             </ion-item>
             <ion-item>
               {{ "Created at <time>" }}

src/views/Login.vue

@@ -2,7 +2,7 @@
   <ion-page>
     <ion-content>
       <div class="flex">
-        <form class="login-container" @keyup.enter="login(form)" @submit.prevent="login(form)">
+        <form class="login-container" @keyup.enter="login(form)" @submit.prevent>
           <Logo />
 
           <ion-item lines="full">
@@ -73,7 +73,7 @@ export default defineComponent({
           this.password = ""
           this.$router.push("/")
         }
-      })
+      }).catch(err => err)
     }
   },
   setup() {