Router not longer redirects to dashboard on page reload

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();
-    }
 });
 
 function updatePreferences() {

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 } });
+            return next({ name: 'Login', query: { redirect: to.fullPath } });
-        } else {
+        }
+
+        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) {
+            if (!hasRequiredRoles) {
+                return next({ path: '/' });
+            }
+        }
+
         next();
-            } else {
-                next({ path: '/' });
-            }
-        }
     });
 
     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'),
                 },