create a plugin and composable to useAPI

frontend/components/AnalysisList.vue

@@ -25,10 +25,9 @@ const sanitizedAnalyses = computed(() => {
 
 async function deleteAnalysis(analysisId: number) {
   if (csrfToken.value) {
-    await useFetch<null>(`/api/analysis/${analysisId}`,
+    await useAPI<null>(`/api/analysis/${analysisId}`,
       {
         method: "DELETE",
-        headers: [["X-CSRFToken", csrfToken.value]]
       }
     )
     refresh()
@@ -42,10 +41,9 @@ function editionMode(analysisId: number, name: string) {
 }
 async function editAnalysis(analysisId: number) {
   if (csrfToken.value) {
-    await useFetch<null>(`/api/analysis/${analysisId}`,
+    await useAPI<null>(`/api/analysis/${analysisId}`,
       {
         method: "PUT",
-        headers: [["X-CSRFToken", csrfToken.value]],
         body: {
           name: newTitle.value
         },

frontend/components/Main.vue

@@ -22,10 +22,7 @@ const computedMinWidth = computed(() => {
 watchEffect(async () => {
   if (csrfToken.value) {
     // init session
-    const { data, pending, error } = await useFetch("/api/analysis/init-session", {
-      headers: [["X-CSRFToken", csrfToken.value]]
-
-    })
+    const { data, pending, error } = await useAPI("/api/analysis/init-session")
     sessionExpiryDate.value = data.value?.expire_date ?? "NA"
   }
 

frontend/composables/useAPI.ts

+import type { UseFetchOptions } from 'nuxt/app';
+
+export function useAPI<T>(
+    url: string | (() => string),
+    options: UseFetchOptions<T> = {}
+) {
+
+    console.log("useAPI for ", url)
+    return useFetch(url, {
+        ...options,
+        $fetch: useNuxtApp().$api,
+    })
+}
\ No newline at end of file

frontend/composables/useCsrfToken.ts

 export const useCsrfToken = async () => {
     const currentCsrfToken = useCookie('csrftoken')
-    const csrfToken: Ref<string | null | undefined> = ref(null)
+    const csrfToken: Ref<string | undefined> = ref(undefined)
     const pending = ref()
     const error = ref()
     // if (!currentCsrfToken.value) {

frontend/composables/useFetchAnalyses.ts

 import { type Fn, useIntervalFn } from "@vueuse/core";
-import { useFetch } from '#imports'
 
 export const useFetchAnalyses = async (interval = 5000, polling = true,) => {
     const pause = ref<Fn | null>(null)
@@ -10,7 +9,7 @@ export const useFetchAnalyses = async (interval = 5000, polling = true,) => {
         error,
         refresh,
         pending,
-    } = await useFetch<Analysis[]>(
+    } = await useAPI<Analysis[]>(
         `/api/analysis/`,
 
     );

frontend/composables/useFetchAnalysis.ts

@@ -36,7 +36,7 @@ export const useFetchAnalysis = async (analysisId: number, interval = 5000, poll
         error,
         refresh,
         pending,
-    } = await useFetch<Analysis>(
+    } = await useAPI<Analysis>(
         `/api/analysis/${analysisId}`,
 
     );

frontend/plugins/api.ts

+export default defineNuxtPlugin(() => {
+    const $api = $fetch.create({
+        baseURL: '/api',
+        async onRequest({ request, options, error }) {
+            const { csrfToken } = await useCsrfToken()
+            const toValToken = toValue(csrfToken)
+            if (toValToken !== undefined) {
+                // Add Authorization header
+                if (Array.isArray(options.headers)) {
+                    options.headers = options.headers || []
+                    options.headers = [...options.headers, ["X-CSRFToken", toValToken]]
+                }
+                else {
+                    options.headers = options.headers || {}
+                    options.headers = { ...options.headers, "X-CSRFToken": toValToken }
+                }
+            }
+        },
+        onResponseError({ response }) {
+            console.log(response)
+        }
+    })
+    // Expose to useNuxtApp().$api
+    return {
+        provide: {
+            api: $api
+        }
+    }
+})