fix(frontend): refreshen van het token verloopt nu correct

frontend/src/services/auth/auth-service.ts

@@ -26,7 +26,7 @@ async function getUserManagers(): Promise<UserManagersForRoles> {
 const authState = reactive<AuthState>({
     user: null,
     accessToken: null,
-    activeRole: authStorage.getActiveRole() || null,
+    activeRole: authStorage.getActiveRole() ?? null,
 });
 
 /**
@@ -38,18 +38,42 @@ async function loadUser(): Promise<User | null> {
         return null;
     }
     const user = await (await getUserManagers())[activeRole].getUser();
-    authState.user = user;
+    setUserAuthInfo(user);
-    authState.accessToken = user?.access_token || null;
+    authState.activeRole = activeRole ?? null;
-    authState.activeRole = activeRole || null;
     return user;
 }
 
 const isLoggedIn = computed(() => authState.user !== null);
 
+/**
+ * Clears all the cached information about the current authentication.
+ */
+function clearAuthState(): void {
+    authStorage.deleteActiveRole();
+    authState.accessToken = null;
+    authState.user = null;
+    authState.activeRole = null;
+}
+
+/**
+ * Sets the information about the currently logged-in user in the cache.
+ */
+function setUserAuthInfo(newUser: User | null): void {
+    authState.user = newUser;
+    authState.accessToken = newUser?.access_token ?? null;
+
+    if (newUser === null) {
+        authStorage.deleteActiveRole();
+    }
+}
+
 /**
  * Redirect the user to the login page where he/she can choose whether to log in as a student or teacher.
  */
 async function initiateLogin(): Promise<void> {
+    if (isLoggedIn.value) {
+        clearAuthState();
+    }
     await router.push(loginRoute);
 }
 
@@ -80,14 +104,14 @@ async function handleLoginCallback(): Promise<void> {
 async function renewToken(): Promise<User | null> {
     const activeRole = authStorage.getActiveRole();
     if (!activeRole) {
-        // FIXME console.log("Can't renew the token: Not logged in!");
         await initiateLogin();
         return null;
     }
     try {
-        return await (await getUserManagers())[activeRole].signinSilent();
+        const userManagerForRole = (await getUserManagers())[activeRole];
-    } catch (_error) {
+        const user = await userManagerForRole.signinSilent();
-        // FIXME console.log("Can't renew the token: " + error);
+        setUserAuthInfo(user);
+    } catch (_error: unknown) {
         await initiateLogin();
     }
     return null;
@@ -119,13 +143,15 @@ apiClient.interceptors.request.use(
 // Registering interceptor to refresh the token when a request failed because it was expired.
 apiClient.interceptors.response.use(
     (response) => response,
-    async (error: AxiosError<{ message?: string }>) => {
+    async (error: AxiosError<{ message?: string, inner?: {message?: string} }>) => {
         if (error.response?.status === 401) {
-            if (error.response.data.message === "token_expired") {
+            // If the user should already be logged in, his token is probably just expired.
-                // FIXME console.log("Access token expired, trying to refresh...");
+            if (isLoggedIn.value) {
                 await renewToken();
                 return apiClient(error.config!); // Retry the request
-            } // Apparently, the user got a 401 because he was not logged in yet at all. Redirect him to login.
+            }
+
+            // Apparently, the user got a 401 because he was not logged in yet at all. Redirect him to login.
             await initiateLogin();
         }
         return Promise.reject(error);