Replace fetch with Axios including an interceptor

Author: frederikprijck

02-Calling-an-API/package-lock.json

@@ -15,6 +15,7 @@
     "@fortawesome/fontawesome-svg-core": "~1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
+    "axios": "^0.26.1",
     "core-js": "^3.20.3",
     "cors": "^2.8.5",
     "express": "^4.17.2",

02-Calling-an-API/package.json

@@ -8,6 +8,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faLink, faUser, faPowerOff } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { domain, clientId as client_id, audience } from "../auth_config.json";
+import { createAxios } from './plugins/axios';
 
 const app = createApp(App);
 
@@ -24,5 +25,6 @@ app
       audience
     })
   )
+  .use(createAxios())
   .component("font-awesome-icon", FontAwesomeIcon)
   .mount("#app");

02-Calling-an-API/src/main.ts

@@ -0,0 +1,31 @@
+import { App, inject } from "vue";
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosStatic } from "axios";
+import { useAuth0 } from "@auth0/auth0-vue";
+
+export function createAxios() {
+  return {
+    install(app: App) {
+      app.config.globalProperties["axios"] = axios;
+      app.provide("axios", axios);
+    },
+  };
+}
+
+export function useAxios(config?: AxiosRequestConfig): AxiosInstance {
+  const axios = inject("axios") as AxiosStatic;
+  const { getAccessTokenSilently } = useAuth0();
+  const instance = axios.create(config);
+
+  instance.interceptors.request.use(async (config) => {
+    const token = await getAccessTokenSilently();
+
+    config.headers = {
+      Authorization: `Bearer ${token}`,
+      ...config.headers,
+    };
+
+    return config;
+  });
+
+  return instance;
+}

02-Calling-an-API/src/plugins/axios.ts

@@ -21,24 +21,20 @@
 </template>
 
 <script>
-import { useAuth0 } from "@auth0/auth0-vue";
+import { useAxios } from "./../plugins/axios";
 import { ref } from "@vue/reactivity";
 export default {
   name: "Api",
   setup() {
-    const { getAccessTokenSilently } = useAuth0();
+    const api = useAxios({
+      baseURL: '/api'
+    });
     const apiMessage = ref();
     return {
       apiMessage,
       async callApi() {
-        const accessToken = await getAccessTokenSilently();
         try {
-          const response = await fetch("/api/external", {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-            },
-          });
-          const data = await response.json();
+          const { data } = await api.get("/external");
           apiMessage.value = data;
         } catch (e) {
           apiMessage.value = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;