Proper component names

src/components/LeftMenu.vue

@@ -1,6 +1,5 @@
-<script lang="ts" setup>
+<script setup>
-import { ref, Ref } from 'vue';
+import { ref } from 'vue';
-import { RouteRecordRaw } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/routes';
@@ -9,30 +8,17 @@ const { t } = useI18n();
 const { hasAny } = useRole();
 
 const mainRoute = routes.find(route => route.path === '/');
-const modules: RouteRecordRaw[] = mainRoute && mainRoute.children || []
+const modules = mainRoute && mainRoute.children || []
 
-interface MenuItem {
+const items = ref([]);
-    path: string;
-    title?: string;
-    icon?: string;
-    roles: string[];
-}
-
-interface ItemMeta {
-    title?: string;
-    icon?: string;
-    roles?: string[];
-}
-
-const items: Ref<MenuItem[]> = ref([]);
 for (const module of modules) {
-    const item: MenuItem = {
+    const item = {
         path: module.path,
         roles: []
     };
 
     if (module.meta) {
-        const meta: ItemMeta = module.meta;
+        const meta = module.meta;
         item.title = meta.title;
         item.icon = meta.icon;
         item.roles = meta.roles || [];

src/composables/useRole.js

@@ -1,10 +1,9 @@
-import { ComputedRef } from 'vue';
 import { useState } from './useState';
 
 export function useRole() {
-    function hasAny(roles: string[]): boolean {
+    function hasAny(roles) {
         const { getRoles } = useState();
-        const roleStore: ComputedRef<string[]> = getRoles();
+        const roleStore = getRoles();
 
         for (const role of roles) {
             if (roleStore.value.indexOf(role) !== -1) return true;

src/router/index.js

@@ -1,6 +1,11 @@
 import { route } from 'quasar/wrappers';
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
 import routes from './routes';
+import { i18n } from 'src/boot/i18n';
+import { useSession } from 'src/composables/useSession';
+import { useRole } from 'src/composables/useRole';
+const session = useSession();
+const role = useRole();
 
 /*
  * If not building with SSR mode, you can
@@ -28,5 +33,62 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
     });
 
+    Router.beforeEach((to, from, next) => {
+        const { isLoggedIn } = session;
+
+        if (!isLoggedIn && to.name !== 'Login') {
+            next({ path: '/login', query: { redirect: to.fullPath } });
+        } else {
+
+            const pathRoutes = to.matched;
+            const droles = pathRoutes.every(route => {
+                const meta = route.meta;
+                if (meta.roles)
+                    return role.hasAny(meta.roles)
+                return true;
+            });
+
+            if (droles) {
+                next();
+            } else {
+                next({ path: '/' });
+            }
+        }
+    });
+
+    Router.afterEach((to) => {
+        const { t } = i18n.global;
+        let title = '';
+
+        if (to.matched && to.matched.length > 2) {
+
+            const parent = to.matched[1];
+            const parentMeta = parent.meta;
+            if (parentMeta && parentMeta.title) {
+                title += t(`pages.${parentMeta.title}`);
+            }
+        }
+
+        const childMeta = to.meta;
+        if (childMeta && childMeta.title) {
+            if (title != '') title += ': ';
+
+            const childTitle = t(`pages.${childMeta.title}`);
+
+            if (to.params && to.params.id) {
+                const idParam = to.params.id;
+                if (idParam instanceof Array) {
+                    title += `${idParam[0]} - ${childTitle}`
+                } else {
+                    title += `${idParam} - ${childTitle}`;
+                }
+            } else {
+                title += t(`pages.${childMeta.title}`);
+            }
+        }
+
+        document.title = title;
+    });
+
     return Router;
 });

src/router/modules/customer.js

@@ -5,7 +5,7 @@ export default {
         title: 'customers',
         icon: 'vn:client'
     },
-    component: () => import('src/pages/Customer/Customer.vue'),
+    component: () => import('src/pages/Customer/CustomerLayout.vue'),
     redirect: { path: '/customer/list' },
     children: [
         {
@@ -13,11 +13,11 @@ export default {
             meta: {
                 title: 'list'
             },
-            component: () => import('src/pages/Customer/List.vue'),
+            component: () => import('src/pages/Customer/CustomerList.vue'),
         },
         {
             path: '/customer/:id',
-            component: () => import('src/pages/Customer/Card/Card.vue'),
+            component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
             redirect: { name: 'BasicData' },
             children: [
                 {
@@ -26,7 +26,7 @@ export default {
                     meta: {
                         title: 'basicData'
                     },
-                    component: () => import('src/pages/Customer/Card/BasicData.vue'),
+                    component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
                 }
             ]
         },

src/router/modules/ticket.js

@@ -5,14 +5,14 @@ export default {
         title: 'tickets',
         icon: 'vn:ticket',
     },
-    component: () => import('src/pages/Ticket/Ticket.vue'),
+    component: () => import('src/pages/Ticket/TicketLayout.vue'),
-    redirect: { path: '/ticket/list'},
+    redirect: { path: '/ticket/list' },
     children: [
         {
             path: 'list',
-            name: 'List',
+            name: 'TicketList',
             meta: { title: 'list' },
-            component: () => import('src/pages/Ticket/List.vue'),
+            component: () => import('src/pages/Ticket/TicketList.vue'),
         }
     ],
 };