src/components/UserPanel.vue

@@ -1,18 +1,15 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { useRole } from 'src/composables/useRole';
 
-const quasar = useQuasar();
 const state = useState();
 const session = useSession();
-const role = useRole();
 const router = useRouter();
 const { t, locale } = useI18n();
 
@@ -29,19 +26,7 @@ const user = state.getUser();
 const token = session.getToken();
 
 onMounted(async () => {
-    try {
-        const stateRoles = state.getRoles().value;
-        if (stateRoles.length === 0) {
-            await role.fetch();
-        }
-        updatePreferences();
-    } catch (error) {
-        quasar.notify({
-            message: t('errors.statusUnauthorized'),
-            type: 'negative',
-        });
-        logout();
-    }
+    updatePreferences();
 });
 
 function updatePreferences() {
@@ -66,6 +51,7 @@ async function saveLanguage(value) {
     await axios.patch(query, {
         lang: value,
     });
+    user.value.lang = value;
 }
 
 function logout() {

src/components/__tests__/UserPanel.spec.js

@@ -1,56 +0,0 @@
-import { describe, expect, it, jest } from '@jest/globals';
-import { createWrapper, axios, flushPromises } from 'app/tests/jest/jestHelpers';
-import UserPanel from '../UserPanel.vue';
-
-const mockPush = jest.fn();
-
-jest.mock('vue-router', () => ({
-    useRouter: () => ({
-        push: mockPush,
-    }),
-}));
-
-describe('UserPanel onMounted()', () => {
-    it('should define the user into state', async () => {
-        const userMock = {
-            user: {
-                id: 1,
-                name: 'myName',
-                nickname: 'myNickName',
-                lang: 'en',
-                userConfig: {
-                    darkMode: 'false'
-                }
-            },
-            roles: []
-        }
-        const expectedUserData = {
-            id: 1,
-            name: 'myName',
-            nickname: 'myNickName',
-            lang: 'en',
-            darkMode: 'false'
-        }
-
-        jest.spyOn(axios, 'get').mockResolvedValue({ data: userMock });
-        const { vm } = createWrapper(UserPanel);
-
-        await flushPromises()
-
-        expect(vm.state.getUser().value).toEqual(expectedUserData);
-    });
-
-    it('should logout and notify the expected error', async () => {
-        jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
-
-        const { vm } = createWrapper(UserPanel);
-
-        jest.spyOn(vm.quasar, 'notify');
-
-        await flushPromises()
-
-        expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
-            { 'type': 'negative' }
-        ));
-    });
-});

src/i18n/en/index.js

@@ -33,6 +33,7 @@ export default {
         pageTitles: {
             customers: 'Customers',
             list: 'List',
+            createCustomer: 'Create customer',
             basicData: 'Basic Data'
         }
     },

src/i18n/es/index.js

@@ -33,6 +33,7 @@ export default {
         pageTitles: {
             customers: 'Clientes',
             list: 'Listado',
+            createCustomer: 'Crear cliente',
             basicData: 'Datos básicos'
         }
     },

src/router/index.js

@@ -1,11 +1,16 @@
 import { route } from 'quasar/wrappers';
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
+import { Notify } from 'quasar';
 import routes from './routes';
 import { i18n } from 'src/boot/i18n';
+import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { useRole } from 'src/composables/useRole';
+
+const state = useState();
 const session = useSession();
 const role = useRole();
+const { t } = i18n.global;
 
 /*
  * If not building with SSR mode, you can
@@ -33,12 +38,29 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
     });
 
-    Router.beforeEach((to, from, next) => {
+    Router.beforeEach(async (to, from, next) => {
         const { isLoggedIn } = session;
 
         if (!isLoggedIn() && to.name !== 'Login') {
-            next({ name: 'Login', query: { redirect: to.fullPath } });
-        } else {
+            return next({ name: 'Login', query: { redirect: to.fullPath } });
+        }
+
+        if (isLoggedIn()) {
+            try {
+                const stateRoles = state.getRoles().value;
+                if (stateRoles.length === 0) {
+                    await role.fetch();
+                }
+            } catch (error) {
+                Notify.create({
+                    message: t('errors.statusUnauthorized'),
+                    type: 'negative',
+                });
+
+                session.destroy();
+                return next({ path: '/login' });
+            }
+
             const matches = to.matched;
             const hasRequiredRoles = matches.every(route => {
                 const meta = route.meta;
@@ -47,16 +69,15 @@ export default route(function (/* { store, ssrContext } */) {
                 return true;
             });
 
-            if (hasRequiredRoles) {
-                next();
-            } else {
-                next({ path: '/' });
+            if (!hasRequiredRoles) {
+                return next({ path: '/' });
             }
         }
+
+        next();
     });
 
     Router.afterEach((to) => {
-        const { t } = i18n.global;
         let title = t(`login.title`);
 
         const matches = to.matched;

src/router/modules/customer.js

@@ -29,7 +29,7 @@ export default {
                     path: 'create',
                     name: 'CustomerCreate',
                     meta: {
-                        title: 'create'
+                        title: 'createCustomer'
                     },
                     component: () => import('src/pages/Customer/CustomerCreate.vue'),
                 },