Centralize user auth in Vuex to prevent duplicate API calls

Author: BenjaminCharmes

webapp/src/router/index.js

@@ -104,10 +104,10 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
   if (to.path === "/" || (to.name === "samples" && from.path === "/")) {
-    const { getUserInfo } = await import("@/server_fetch_utils.js");
-    const user = await getUserInfo();
+    const { isUserAuthenticated } = await import("@/server_fetch_utils.js");
+    const authenticated = await isUserAuthenticated();
 
-    if (!user) {
+    if (!authenticated) {
       next("/about");
       return;
     }

webapp/src/server_fetch_utils.js

@@ -378,20 +378,12 @@ export function searchCollections(query, nresults = 100) {
 }
 
 export async function getUserInfo() {
-  store.commit("setCurrentUserInfoLoading", true);
-  return fetch_get(`${API_URL}/get-current-user/`)
-    .then((response_json) => {
-      store.commit("setDisplayName", response_json.display_name);
-      store.commit("setCurrentUserID", response_json.immutable_id);
-      store.commit("setIsUnverified", response_json.account_status == "unverified" ? true : false);
-      store.commit("setCurrentUserInfoLoading", false);
-      return response_json;
-    })
-    .catch(() => {
-      // If the user is not logged in, we return null.
-      store.commit("setCurrentUserInfoLoading", false);
-      return null;
-    });
+  return store.dispatch("fetchCurrentUser", { fullInfo: true });
+}
+
+export async function isUserAuthenticated() {
+  const result = await store.dispatch("fetchCurrentUser");
+  return result === true || (result && result.immutable_id);
 }
 
 export async function requestMagicLink(email_address) {

webapp/src/store/index.js

@@ -1,3 +1,4 @@
+import { API_URL } from "@/resources.js";
 import { createStore } from "vuex";
 // import { createLogger } from "vuex";
 // import { set } from 'vue'
@@ -30,6 +31,8 @@ export default createStore({
     currentUserDisplayName: null,
     currentUserID: null,
     currentUserInfoLoading: false,
+    currentUserInfoLoaded: false,
+    currentUserInfoPromise: null,
     serverInfo: null,
     blocksInfos: {},
     currentUserIsUnverified: false,
@@ -344,6 +347,9 @@ export default createStore({
     },
     setCurrentUserInfoLoading(state, isLoading) {
       state.currentUserInfoLoading = isLoading;
+      if (!isLoading && !state.currentUserID) {
+        state.currentUserInfoLoaded = true;
+      }
     },
     setItemGraphIsLoading(state, isLoading) {
       state.itemGraphIsLoading = isLoading;
@@ -409,7 +415,48 @@ export default createStore({
       return Object.values(state.blocksInfos);
     },
   },
-  actions: {},
+  actions: {
+    async fetchCurrentUser({ state, commit }, { fullInfo = false } = {}) {
+      if (state.currentUserInfoPromise) {
+        return state.currentUserInfoPromise;
+      }
+
+      if (!fullInfo && state.currentUserInfoLoaded) {
+        return state.currentUserID !== null;
+      }
+
+      commit("setCurrentUserInfoLoading", true);
+
+      const promise = fetch(`${API_URL}/get-current-user/`, {
+        method: "GET",
+        credentials: "include",
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("UNAUTHORIZED");
+          }
+          return response.json();
+        })
+        .then((response_json) => {
+          commit("setDisplayName", response_json.display_name);
+          commit("setCurrentUserID", response_json.immutable_id);
+          commit("setIsUnverified", response_json.account_status == "unverified" ? true : false);
+          commit("setCurrentUserInfoLoading", false);
+          state.currentUserInfoLoaded = true;
+          state.currentUserInfoPromise = null;
+          return response_json;
+        })
+        .catch(() => {
+          commit("setCurrentUserInfoLoading", false);
+          state.currentUserInfoLoaded = true;
+          state.currentUserInfoPromise = null;
+          return null;
+        });
+
+      state.currentUserInfoPromise = promise;
+      return promise;
+    },
+  },
   modules: {},
   // plugins: [createLogger()],
 });