src/composables/useRole.js

@@ -13,7 +13,6 @@ export function useRole() {
             name: data.user.name,
             nickname: data.user.nickname,
             lang: data.user.lang || 'es',
-            darkMode: data.user.userConfig.darkMode,
         };
         state.setUser(userData);
         state.setRoles(roles);

src/composables/useSession.js

@@ -1,5 +1,7 @@
 import { useState } from './useState';
 import { useRole } from './useRole';
+import { useUserConfig } from './useUserConfig';
+
 
 export function useSession() {
     function getToken() {
@@ -36,11 +38,10 @@ export function useSession() {
     }
 
     async function login(token, keepLogin) {
-        const { fetch } = useRole();
-
         setToken({ token, keepLogin });
 
-        await fetch();
+        await useRole().fetch();
+        await useUserConfig().fetch();
     }
 
     function isLoggedIn() {

src/composables/useUserConfig.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+import { useState } from './useState';
+
+export function useUserConfig() {
+    const state = useState();
+
+    async function fetch() {
+        const { data } = await axios.get('UserConfigs/getUserConfig');
+        const user = state.getUser().value;
+        user.darkMode = data.darkMode;
+        state.setUser(user);
+    }
+
+    return {
+        fetch,
+    };
+}

src/router/index.js

@@ -10,11 +10,11 @@ import { i18n } from 'src/boot/i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { useRole } from 'src/composables/useRole';
+import { useUserConfig } from 'src/composables/useUserConfig';
 import { toLowerCamel } from 'src/filters';
 
 const state = useState();
 const session = useSession();
-const role = useRole();
 const { t } = i18n.global;
 
 const createHistory = process.env.SERVER
@@ -53,12 +53,13 @@ export default route(function (/* { store, ssrContext } */) {
         if (isLoggedIn()) {
             const stateRoles = state.getRoles().value;
             if (stateRoles.length === 0) {
-                await role.fetch();
+                await useRole().fetch();
+                await useUserConfig().fetch();
             }
             const matches = to.matched;
             const hasRequiredRoles = matches.every((route) => {
                 const meta = route.meta;
-                if (meta && meta.roles) return role.hasAny(meta.roles);
+                if (meta && meta.roles) return useRole().hasAny(meta.roles);
                 return true;
             });
 

test/vitest/__tests__/composables/useRole.spec.js

@@ -23,21 +23,18 @@ describe('useRole', () => {
                 name: `T'Challa`,
                 nickname: 'Black Panther',
                 lang: 'en',
-                userConfig: {
-                    darkMode: false,
-                },
             };
             const expectedUser = {
                 id: 999,
                 name: `T'Challa`,
                 nickname: 'Black Panther',
                 lang: 'en',
-                darkMode: false,
             };
             const expectedRoles = ['salesPerson', 'admin'];
-            vi.spyOn(axios, 'get').mockResolvedValue({
+            vi.spyOn(axios, 'get')
+            .mockResolvedValueOnce({
                 data: { roles: rolesData, user: fetchedUser },
-            });
+            })
 
             vi.spyOn(role.state, 'setUser');
             vi.spyOn(role.state, 'setRoles');