@fy-/fws-vue 2.3.10 → 2.3.12

package/composables/translations.ts

@@ -5,13 +5,30 @@ import { inject } from 'vue'
 
 export type I18nextTranslate = typeof i18next.t
 
+// Cached translation service instance
+let cachedTranslation: TFunction | null = null
+
 export function useTranslation() {
+  // Return cached instance if available
+  if (cachedTranslation) return cachedTranslation
+
   const translate = inject<TFunction>('fwsVueTranslate')
   if (!translate) throw new Error('Did you apply app.use(fwsVue)?')
 
+  // Cache the translation service instance
+  cachedTranslation = translate
   return translate
 }
 
+// Default configuration for i18next to avoid object recreation
+const defaultI18nextConfig = {
+  ns: ['translation'],
+  defaultNS: 'translation',
+  debug: false,
+  load: 'currentOnly' as const,
+  initImmediate: false,
+}
+
 export function i18nextPromise(
   backend: typeof I18nBackend,
   locale: string = 'en-US',
@@ -19,11 +36,10 @@ export function i18nextPromise(
   ns: string = 'translation',
 ) {
   return i18next.use(backend).init({
+    ...defaultI18nextConfig,
     ns: [ns],
     defaultNS: ns,
     debug,
     lng: locale,
-    load: 'currentOnly',
-    initImmediate: false,
   })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",

package/stores/user.ts

@@ -3,13 +3,18 @@ import type { RouteLocation } from 'vue-router'
 import type { APIResult } from '../composables/rest'
 import { rest } from '@fy-/fws-js'
 import { defineStore } from 'pinia'
-import { computed } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { useServerRouter } from './serverRouter'
 
 export interface UserStore {
   user: User | null
 }
 
+// Create a debounce mechanism for authentication checks
+let refreshPromise: Promise<void> | null = null
+const refreshDebounceTime = 200 // 200ms
+let lastRefreshTime = 0
+
 export const useUserStore = defineStore('userStore', {
   state: (): UserStore => ({
     user: null,
@@ -21,33 +26,79 @@ export const useUserStore = defineStore('userStore', {
   },
   actions: {
     async refreshUser() {
-      const user: APIResult = await rest('User:get', 'GET').catch(() => {
-        this.setUser(null)
-      })
-      if (user.result === 'success') {
-        this.setUser(user.data)
-      }
-      else {
-        this.setUser(null)
+      // Debounce refreshUser calls to prevent multiple concurrent API requests
+      const now = Date.now()
+      if (refreshPromise && now - lastRefreshTime < refreshDebounceTime) {
+        return refreshPromise
       }
+
+      lastRefreshTime = now
+      refreshPromise = new Promise((resolve) => {
+        rest('User:get', 'GET')
+          .then((user: APIResult) => {
+            if (user.result === 'success') {
+              this.setUser(user.data)
+            }
+            else {
+              this.setUser(null)
+            }
+          })
+          .catch(() => {
+            this.setUser(null)
+          })
+          .finally(() => {
+            resolve()
+            // Clear the promise reference after a delay
+            setTimeout(() => {
+              refreshPromise = null
+            }, refreshDebounceTime)
+          })
+      })
+
+      return refreshPromise
     },
+
     async logout() {
-      const user: APIResult = await rest('User:logout', 'POST').catch(() => {
-        this.setUser(null)
-      })
-      if (user.result === 'success') {
+      try {
+        const user: APIResult = await rest('User:logout', 'POST')
+        // In all cases, we set the user to null
         this.setUser(null)
+        return user.result === 'success'
       }
-      else {
+      catch {
         this.setUser(null)
+        return false
       }
     },
+
     setUser(user: User | null) {
       this.user = user
     },
   },
 })
 
+// Shared implementation for route checking to avoid code duplication
+function createUserChecker(path: string, redirectLink: boolean) {
+  // Use shallowRef for router since it doesn't need reactivity
+  const router = shallowRef(useServerRouter())
+
+  return (route: RouteLocation, isAuthenticated: boolean) => {
+    if (!route.meta.reqLogin) return false
+
+    if (!isAuthenticated) {
+      if (!redirectLink) {
+        router.value.push(path)
+      }
+      else {
+        router.value.status = 307
+        router.value.push(`${path}?return_to=${route.path}`)
+      }
+      return true
+    }
+    return false
+  }
+}
+
 export async function useUserCheckAsyncSimple(
   path = '/login',
   redirectLink = false,
@@ -56,25 +107,15 @@ export async function useUserCheckAsyncSimple(
   await userStore.refreshUser()
   const isAuth = computed(() => userStore.isAuth)
   const router = useServerRouter()
+  const checkUser = createUserChecker(path, redirectLink)
 
-  const checkUser = (route: RouteLocation) => {
-    if (route.meta.reqLogin) {
-      if (!isAuth.value) {
-        if (!redirectLink) {
-          router.push(path)
-        }
-        else {
-          router.status = 307
-          router.push(`${path}?return_to=${route.path}`)
-        }
-      }
-    }
-  }
-  checkUser(router.currentRoute)
+  // Check current route immediately
+  checkUser(router.currentRoute, isAuth.value)
 
+  // Setup route guard
   router._router.beforeEach((to: any) => {
     if (to.fullPath !== path) {
-      checkUser(to)
+      checkUser(to, isAuth.value)
     }
   })
 }
@@ -84,28 +125,19 @@ export async function useUserCheckAsync(path = '/login', redirectLink = false) {
   await userStore.refreshUser()
   const isAuth = computed(() => userStore.isAuth)
   const router = useServerRouter()
+  const checkUser = createUserChecker(path, redirectLink)
 
-  const checkUser = (route: RouteLocation) => {
-    if (route.meta.reqLogin) {
-      if (!isAuth.value) {
-        if (!redirectLink) {
-          router.push(path)
-        }
-        else {
-          router.status = 307
-          router.push(`${path}?return_to=${route.path}`)
-        }
-      }
-    }
-  }
-  checkUser(router.currentRoute)
+  // Check current route immediately
+  checkUser(router.currentRoute, isAuth.value)
 
+  // Setup route guards
   router._router.afterEach(async () => {
     await userStore.refreshUser()
   })
+
   router._router.beforeEach((to: any) => {
     if (to.fullPath !== path) {
-      checkUser(to)
+      checkUser(to, isAuth.value)
     }
   })
 }
@@ -114,31 +146,23 @@ export function useUserCheck(path = '/login', redirectLink = false) {
   const userStore = useUserStore()
   const isAuth = computed(() => userStore.isAuth)
   const router = useServerRouter()
+  const checkUser = createUserChecker(path, redirectLink)
 
-  const checkUser = (route: RouteLocation) => {
-    if (route.meta.reqLogin) {
-      if (!isAuth.value) {
-        if (!redirectLink) {
-          router.push(path)
-        }
-        else {
-          router.status = 307
-          router.push(`${path}?return_to=${route.path}`)
-        }
-      }
-    }
-  }
+  // Check current route after refresh
   userStore.refreshUser().then(() => {
     if (router.currentRoute) {
-      checkUser(router.currentRoute)
+      checkUser(router.currentRoute, isAuth.value)
     }
   })
+
+  // Setup route guards
   router._router.afterEach(async () => {
     await userStore.refreshUser()
   })
+
   router._router.beforeEach((to: any) => {
     if (to.fullPath !== path) {
-      checkUser(to)
+      checkUser(to, isAuth.value)
     }
   })
 }