fix: authenticate per request (#2258)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#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({
+	const instance = axios.create({baseURL: window.API_URL})
-		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()) {	
+export function AuthenticatedHTTPFactory() {	
-	return axios.create({
+	const instance = HTTPFactory()
-		baseURL: window.API_URL,
+
-		headers: {
+	instance.interceptors.request.use((config) => {
-			Authorization: `Bearer ${token}`,
+		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
 }

src/services/abstractService.ts

@@ -1,6 +1,5 @@
-import axios from 'axios'
 import {objectToSnakeCase} from '@/helpers/case'
-import {getToken} from '@/helpers/auth'
+import {AuthenticatedHTTPFactory} from '@/http-common'
 
 function convertObject(o) {
 	if (o instanceof Date) {
@@ -56,12 +55,7 @@ export default class AbstractService {
 	 * @param [paths] An object with all paths. Default values are specified above.
 	 */
 	constructor(paths) {
-		this.http = axios.create({
+		this.http = AuthenticatedHTTPFactory()
-			baseURL: window.API_URL,
-			headers: {
-				'Content-Type': 'application/json',
-			},
-		})
 
 		// Set the interceptors to process every request
 		this.http.interceptors.request.use((config) => {
@@ -88,12 +82,6 @@ export default class AbstractService {
 			return config
 		})
 
-		// Set the default auth header if we have a token
-		const token = getToken()
-		if (token !== null) {
-			this.http.defaults.headers.common['Authorization'] = `Bearer ${token}`
-		}
-
 		if (paths) {
 			this.paths = {
 				create: paths.create !== undefined ? paths.create : '',

src/store/modules/auth.ts

@@ -215,7 +215,7 @@ export default {
 				return
 			}
 
-			const HTTP = AuthenticatedHTTPFactory(jwt)
+			const HTTP = AuthenticatedHTTPFactory()
 			try {
 				const response = await HTTP.get('user')
 				const info = new UserModel(response.data)