feat: refs #8534 implement navigation and state query guards for improved routing control

src/router/__tests__/index.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest';
+import { ref, nextTick } from 'vue';
+import { stateQueryGuard } from 'src/router/hooks';
+import { __test as testStateQuery } from 'src/stores/useStateQueryStore';
+
+vi.mock('src/stores/useStateQueryStore', () => {
+    const isLoading = ref(true);
+    return {
+        useStateQueryStore: () => ({
+            isLoading: () => isLoading,
+        }),
+        __test: {
+            isLoading,
+        },
+    };
+});
+
+describe('stateQueryGuard', () => {
+    it('espera a que isLoading sea false antes de llamar a next()', async () => {
+        const next = vi.fn();
+
+        const guardPromise = stateQueryGuard(next);
+        expect(next).not.toHaveBeenCalled();
+
+        testStateQuery.isLoading.value = false;
+        await nextTick();
+        await guardPromise;
+        expect(next).toHaveBeenCalled();
+    });
+});

src/router/hooks.js

@@ -0,0 +1,93 @@
+import { useRole } from 'src/composables/useRole';
+import { useUserConfig } from 'src/composables/useUserConfig';
+import { useTokenConfig } from 'src/composables/useTokenConfig';
+import { useAcl } from 'src/composables/useAcl';
+import { isLoggedIn } from 'src/utils/session';
+import { useSession } from 'src/composables/useSession';
+import { useStateQueryStore } from 'src/stores/useStateQueryStore';
+import { watch } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+let session = null;
+const { t, te } = i18n.global;
+
+export async function navigationGuard(to, from, next, Router, state) {
+    if (!session) session = useSession();
+    const outLayout = Router.options.routes[0].children.map((r) => r.name);
+    if (!session.isLoggedIn() && !outLayout.includes(to.name)) {
+        return next({ name: 'Login', query: { redirect: to.fullPath } });
+    }
+
+    if (isLoggedIn()) {
+        const stateRoles = state.getRoles().value;
+        if (stateRoles.length === 0) {
+            await useRole().fetch();
+            await useAcl().fetch();
+            await useUserConfig().fetch();
+            await useTokenConfig().fetch();
+        }
+        const matches = to.matched;
+        const hasRequiredAcls = matches.every((route) => {
+            const meta = route.meta;
+            if (!meta?.acls) return true;
+            return useAcl().hasAny(meta.acls);
+        });
+        if (!hasRequiredAcls) return next({ path: '/' });
+    }
+
+    next();
+}
+
+export async function stateQueryGuard(next) {
+    const stateQuery = useStateQueryStore();
+    await waitUntilFalse(stateQuery.isLoading());
+
+    next();
+}
+
+export function setPageTitle(to) {
+    let title = t(`login.title`);
+
+    const matches = to.matched;
+    if (matches && matches.length > 1) {
+        const module = matches[1];
+        const moduleTitle = module.meta && module.meta.title;
+        if (moduleTitle) {
+            title = t(`globals.pageTitles.${moduleTitle}`);
+        }
+    }
+
+    const childPage = to.meta;
+    const childPageTitle = childPage && childPage.title;
+    if (childPageTitle && matches.length > 2) {
+        if (title != '') title += ': ';
+
+        const moduleLocale = `globals.pageTitles.${childPageTitle}`;
+        const pageTitle = te(moduleLocale)
+            ? t(moduleLocale)
+            : t(`globals.pageTitles.${childPageTitle}`);
+        const idParam = to.params && to.params.id;
+        const idPageTitle = `${idParam} - ${pageTitle}`;
+        const builtTitle = idParam ? idPageTitle : pageTitle;
+
+        title += builtTitle;
+    }
+
+    document.title = title;
+}
+
+function waitUntilFalse(ref) {
+    return new Promise((resolve) => {
+        if (!ref.value) return resolve();
+        const stop = watch(
+            ref,
+            (val) => {
+                if (!val) {
+                    stop();
+                    resolve();
+                }
+            },
+            { immediate: true },
+        );
+    });
+}

src/router/index.js

@@ -6,101 +6,25 @@ import {
     createWebHashHistory,
 } from 'vue-router';
 import routes from './routes';
-import { i18n } from 'src/boot/i18n';
 import { useState } from 'src/composables/useState';
-import { useRole } from 'src/composables/useRole';
+import { navigationGuard, stateQueryGuard } from './hooks';
-import { useUserConfig } from 'src/composables/useUserConfig';
-import { useTokenConfig } from 'src/composables/useTokenConfig';
-import { useAcl } from 'src/composables/useAcl';
-import { isLoggedIn } from 'src/utils/session';
-import { useSession } from 'src/composables/useSession';
 
-let session = null;
+const webHistory =
-const { t, te } = i18n.global;
+    process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory;
-
+const createHistory = process.env.SERVER ? createMemoryHistory : webHistory;
-const createHistory = process.env.SERVER
-    ? createMemoryHistory
-    : process.env.VUE_ROUTER_MODE === 'history'
-      ? createWebHistory
-      : createWebHashHistory;
 
 const Router = createRouter({
     scrollBehavior: () => ({ left: 0, top: 0 }),
     routes,
-
-    // Leave this as is and make changes in quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
     history: createHistory(process.env.VUE_ROUTER_BASE),
 });
 
-/*
- * If not building with SSR mode, you can
- * directly export the Router instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Router instance.
- */
 export { Router };
-export default defineRouter(function (/* { store, ssrContext } */) {
+export default defineRouter(() => {
     const state = useState();
-    Router.beforeEach(async (to, from, next) => {
+    Router.beforeEach((to, from, next) => navigationGuard(to, from, next, Router, state));
-        if (!session) session = useSession();
+    Router.beforeEach((to, from, next) => stateQueryGuard(next));
-        const outLayout = Router.options.routes[0].children.map((r) => r.name);
+    Router.afterEach((to) => setPageTitle(to));
-        if (!session.isLoggedIn() && !outLayout.includes(to.name)) {
-            return next({ name: 'Login', query: { redirect: to.fullPath } });
-        }
-
-        if (isLoggedIn()) {
-            const stateRoles = state.getRoles().value;
-            if (stateRoles.length === 0) {
-                await useRole().fetch();
-                await useAcl().fetch();
-                await useUserConfig().fetch();
-                await useTokenConfig().fetch();
-            }
-            const matches = to.matched;
-            const hasRequiredAcls = matches.every((route) => {
-                const meta = route.meta;
-                if (!meta?.acls) return true;
-                return useAcl().hasAny(meta.acls);
-            });
-            if (!hasRequiredAcls) return next({ path: '/' });
-        }
-
-        next();
-    });
-
-    Router.afterEach((to) => {
-        let title = t(`login.title`);
-
-        const matches = to.matched;
-        if (matches && matches.length > 1) {
-            const module = matches[1];
-            const moduleTitle = module.meta && module.meta.title;
-            if (moduleTitle) {
-                title = t(`globals.pageTitles.${moduleTitle}`);
-            }
-        }
-
-        const childPage = to.meta;
-        const childPageTitle = childPage && childPage.title;
-        if (childPageTitle && matches.length > 2) {
-            if (title != '') title += ': ';
-
-            const moduleLocale = `globals.pageTitles.${childPageTitle}`;
-            const pageTitle = te(moduleLocale)
-                ? t(moduleLocale)
-                : t(`globals.pageTitles.${childPageTitle}`);
-            const idParam = to.params && to.params.id;
-            const idPageTitle = `${idParam} - ${pageTitle}`;
-            const builtTitle = idParam ? idPageTitle : pageTitle;
-
-            title += builtTitle;
-        }
-        document.title = title;
-    });
 
     Router.onError(({ message }) => {
         const errorMessages = [