axios bearer header setup for access, refresh tokens

Author: supalarry

frontend/src/plugins/http.js

@@ -1,20 +1,31 @@
+/* eslint-disable prefer-arrow-callback */
+/* eslint-disable func-names */
+/* eslint-disable no-param-reassign */
+
 import Axios from 'axios';
 import Vue from 'vue';
+import { getAccessToken, getRefreshToken, handleAccessTokenExpiration } from '../auth/tokens';
 
-function createAxiosInstance(baseURL) {
-  return Axios.create({
-    baseURL,
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${localStorage.token}`,
-    },
-  });
-}
+Axios.defaults.baseURL = process.env.VUE_APP_BACKEND_BASE_URL;
 
-const axiosInstance = createAxiosInstance(process.env.VUE_APP_BACKEND_BASE_URL);
+Axios.interceptors.request.use(async function (config) {
+  if (config.url === '/auth/refresh') {
+    config.headers.Authorization = `Bearer ${getRefreshToken()}`;
+  } else if (getAccessToken()) {
+    await handleAccessTokenExpiration();
+    if (getAccessToken()) {
+      config.headers.Authorization = `Bearer ${getAccessToken()}`;
+    } else {
+      return { headers: {}, method: config.method, url: '' };
+    }
+  }
+  return config;
+}, function (error) {
+  return Promise.reject(error);
+});
 
 export default {
   install() {
-    Vue.prototype.$http = axiosInstance;
+    Vue.prototype.$http = Axios;
   },
 };