fix: authenticate per request (#2258)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2258
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/http-common/index.ts

@@ -2,17 +2,35 @@ import axios from 'axios'
 import {getToken} from '@/helpers/auth'
 
 export function HTTPFactory() {
-	return axios.create({
-		baseURL: window.API_URL,
+	const instance = axios.create({baseURL: window.API_URL})
+
+	instance.interceptors.request.use((config) => {
+		// by setting the baseURL fresh for every request
+		// we make sure that it is never outdated in case it is updated
+		config.baseURL = window.API_URL
+
+		return config
 	})
+
+	return instance
 }
 
-export function AuthenticatedHTTPFactory(token = getToken()) {	
-	return axios.create({
-		baseURL: window.API_URL,
-		headers: {
-			Authorization: `Bearer ${token}`,
+export function AuthenticatedHTTPFactory() {	
+	const instance = HTTPFactory()
+
+	instance.interceptors.request.use((config) => {
+		config.headers = {
+			...config.headers,
 			'Content-Type': 'application/json',
-		},
+		}
+
+		// Set the default auth header if we have a token
+		const token = getToken()
+		if (token !== null) {
+			config.headers['Authorization'] = `Bearer ${token}`
+		}
+		return config
 	})
+
+	return instance
 }