[studio] refresh token on reconnect #1344 (#1345)

studio - refresh token on reconnect
agnesoft · Nov 2, 2024 · 1111725 · 1111725
1 parent fe01451
commit 1111725
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/agdb_studio/src/composables/user/account.ts b/agdb_studio/src/composables/user/account.ts
@@ -1,4 +1,4 @@
-import { getClient } from "@/services/api.service";
+import { client } from "@/services/api.service";
 import { useAuth } from "@/composables/user/auth";
 import { ref, watch } from "vue";
 
@@ -17,12 +17,10 @@ const fetchUserStatus = async () => {
         return;
     }
 
-    getClient()
-        ?.user_status()
-        ?.then((status) => {
-            username.value = status.data.name;
-            admin.value = status.data.admin;
-        });
+    client.value?.user_status()?.then((status) => {
+        username.value = status.data.name;
+        admin.value = status.data.admin;
+    });
 };
 watch(() => token.value, fetchUserStatus, { immediate: true });
 

diff --git a/agdb_studio/src/composables/user/auth.ts b/agdb_studio/src/composables/user/auth.ts
@@ -1,15 +1,19 @@
-import { getClient, removeToken } from "@/services/api.service";
+import { client, removeToken } from "@/services/api.service";
 import { ACCESS_TOKEN } from "@/constants";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 const accessToken = ref<string>();
 
+const isLoggedIn = computed(() => {
+    return accessToken.value !== undefined;
+});
+
 export const refreshToken = (): void => {
     const prevLogin = isLoggedIn.value;
     const localStorageToken = localStorage.getItem(ACCESS_TOKEN);
-    const clientToken = getClient()?.get_token();
+    const clientToken = client.value?.get_token();
     if (localStorageToken && clientToken !== localStorageToken) {
-        getClient()?.set_token(localStorageToken);
+        client.value?.set_token(localStorageToken);
     }
     if (accessToken.value !== localStorageToken) {
         accessToken.value = localStorageToken ?? undefined;
@@ -19,35 +23,32 @@ export const refreshToken = (): void => {
         window.location.reload();
     }
 };
+refreshToken();
+
+watch(client, refreshToken);
 
 export const setLocalStorageToken = (token: string): void => {
     localStorage.setItem(ACCESS_TOKEN, token);
     refreshToken();
 };
 
-const isLoggedIn = computed(() => {
-    return accessToken.value !== undefined;
-});
-
 window.addEventListener("storage", refreshToken);
 
 const login = async (
     username: string,
     password: string,
 ): Promise<string | undefined> => {
-    return getClient()
-        ?.login(username, password)
-        .then((token) => {
-            setLocalStorageToken(token);
-            return token;
-        });
+    return client.value?.login(username, password).then((token) => {
+        setLocalStorageToken(token);
+        return token;
+    });
 };
 
 const logout = async (): Promise<void> => {
     if (!isLoggedIn.value) {
         return;
     }
-    await getClient()?.logout();
+    await client.value?.logout();
     accessToken.value = undefined;
     removeToken();
 };

diff --git a/agdb_studio/src/services/api.service.spec.ts b/agdb_studio/src/services/api.service.spec.ts
@@ -1,6 +1,6 @@
 import { MAX_CONNECTION_ATTEMPTS } from "@/constants";
 import {
-    getClient,
+    client as apiClient,
     initClient,
     responseInterceptor,
     errorInterceptor,
@@ -17,9 +17,9 @@ describe("client service", () => {
         vi.clearAllMocks();
     });
 
-    describe("getClient", () => {
+    describe("client.value", () => {
         it("returns client", () => {
-            expect(getClient()).toBeDefined();
+            expect(apiClient.value).toBeDefined();
         });
     });
     describe("initClient", () => {

diff --git a/agdb_studio/src/services/api.service.ts b/agdb_studio/src/services/api.service.ts
@@ -5,15 +5,16 @@ import {
     BASE_CONNECTION_TIMEOUT,
     MAX_CONNECTION_ATTEMPTS,
 } from "@/constants";
+import { computed, ref } from "vue";
 
-let client: AgdbApi.AgdbApiClient | undefined;
+const _client = ref<AgdbApi.AgdbApiClient | undefined>();
 
-export const getClient = (): AgdbApi.AgdbApiClient | undefined => {
-    return client;
-};
+export const client = computed((): AgdbApi.AgdbApiClient | undefined => {
+    return _client.value;
+});
 
 export const removeToken = (): void => {
-    client?.reset_token();
+    client.value?.reset_token();
     localStorage.removeItem(ACCESS_TOKEN);
     window.location.reload();
 };
@@ -33,7 +34,7 @@ export const errorInterceptor = (error: AxiosError) => {
 let connectionAttempts = 0;
 
 export const initClient = async (): Promise<void> => {
-    client = await AgdbApi.client(import.meta.env.VITE_API_URL).catch(
+    _client.value = await AgdbApi.client(import.meta.env.VITE_API_URL).catch(
         (error: AxiosError) => {
             console.error(error.message);
             if (connectionAttempts < MAX_CONNECTION_ATTEMPTS) {
@@ -52,6 +53,9 @@ export const initClient = async (): Promise<void> => {
         },
     );
     console.log("Client initialized");
-    client?.interceptors.response.use(responseInterceptor, errorInterceptor);
+    client.value?.interceptors.response.use(
+        responseInterceptor,
+        errorInterceptor,
+    );
 };
 await initClient();