nullcart/cms/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { ROUTE_NAMES } from '@/consts/routeNames';

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/login',
            name: ROUTE_NAMES.Login,
            component: () => import('../views/CmsLoginView.vue'),
            meta: { title: 'CMS - Sign in', hideNav: true }
        },
        {
            path: '/products/:id',
            name: ROUTE_NAMES.ProductDetail,
            component: () => import('../views/CmsProductDetailView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Product', activeMenu: '/products' }
        },
        {
            path: '/products/:productId/variants/:variantId',
            name: ROUTE_NAMES.ProductVariantDetail,
            component: () => import('../views/CmsProductVariantDetailView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Variant', activeMenu: '/products' }
        },
        {
            path: '/products',
            name: ROUTE_NAMES.Products,
            component: () => import('../views/CmsProductsView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Products' }
        },
        {
            path: '/categories',
            name: ROUTE_NAMES.Categories,
            component: () => import('../views/CmsCategoriesView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Categories' }
        },
        {
            path: '/discount-codes',
            name: ROUTE_NAMES.DiscountCodes,
            component: () => import('../views/CmsDiscountCodesView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Discount codes' }
        },
        {
            path: '/blog/:id',
            name: ROUTE_NAMES.BlogPostDetail,
            component: () => import('../views/CmsBlogPostDetailView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Blog post', activeMenu: '/blog' }
        },
        {
            path: '/blog',
            name: ROUTE_NAMES.BlogPosts,
            component: () => import('../views/CmsBlogPostsView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Blog' }
        },
        {
            path: '/orders/:id',
            name: ROUTE_NAMES.OrderDetail,
            component: () => import('../views/CmsOrderDetailView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Order', activeMenu: '/orders' }
        },
        {
            path: '/orders',
            name: ROUTE_NAMES.Orders,
            component: () => import('../views/CmsOrdersView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Orders' }
        },
        {
            path: '/settings',
            component: () => import('../views/CmsSettingsLayout.vue'),
            meta: { requiresAuth: true, title: 'CMS - Settings', activeMenu: '/settings' },
            redirect: { name: ROUTE_NAMES.ShopSettings },
            children: [
                {
                    path: 'shop',
                    name: ROUTE_NAMES.ShopSettings,
                    component: () => import('../views/CmsShopSettingsView.vue'),
                    meta: { requiresAuth: true, title: 'CMS - Shop settings', activeMenu: '/settings' }
                },
                {
                    path: 'notifications',
                    name: ROUTE_NAMES.Notifications,
                    component: () => import('../views/CmsNotificationsView.vue'),
                    meta: { requiresAuth: true, title: 'CMS - Notifications', activeMenu: '/settings' }
                }
            ]
        },
        {
            path: '/wallet',
            component: () => import('../views/CmsWalletView.vue'),
            meta: { requiresAuth: true, title: 'CMS - Wallet', activeMenu: '/wallet' },
            redirect: { name: ROUTE_NAMES.MoneroWallet },
            children: [
                {
                    path: 'monero',
                    name: ROUTE_NAMES.MoneroWallet,
                    component: () => import('../components/wallet/MoneroWallet.vue'),
                    meta: { requiresAuth: true, title: 'CMS - Monero wallet', activeMenu: '/wallet' }
                },
                {
                    path: 'bitcoin',
                    name: ROUTE_NAMES.BitcoinWallet,
                    component: () => import('../components/wallet/BitcoinWallet.vue'),
                    meta: { requiresAuth: true, title: 'CMS - Bitcoin wallet', activeMenu: '/wallet' }
                }
            ]
        },
        {
            path: '/:pathMatch(.*)*',
            redirect: { name: ROUTE_NAMES.Login }
        }
    ]
});

router.beforeEach(to => {
    const auth = useAuthStore();

    if (to.meta.requiresAuth && !auth.isSignedIn) {
        return { name: ROUTE_NAMES.Login };
    }

    return true;
});

router.afterEach(to => {
    const title = to.meta.title;

    if (title && typeof title === 'string') {
        document.title = title;
    }
});

export default router;