social-media/src/router/router.js

import {createRouter, createWebHistory} from 'vue-router'
import About from '@/views/documentation/About.vue'
import ContentPolicy from '@/views/documentation/ContentPolicy.vue'
import FAQ from '@/views/documentation/FAQ.vue'
import Pricing from '@/views/documentation/Pricing.vue'
import CreatorGuide from '@/views/documentation/CreatorGuide.vue'
import HelpAndContact from '@/views/documentation/HelpAndContact.vue'
import TermsAndConditions from '@/views/documentation/TermsAndConditions.vue'
import LoginView from '../views/LoginView.vue'
import PaymentCompleted from '../views/PayementCompleted.vue'
import SignupView from '../views/SignupView.vue'
import Join from '../views/main/Join.vue'
import Register from '../views/main/Register.vue'
import Home from '../views/main/Home.vue'
import Wallet from '../views/main/Wallet.vue'
import ProfilePage from '@/views/profile/ProfilePage.vue'
import CreatorList from '@/views/browser/CreatorList.vue'
import PostContent from "@/views/contents/PostContent.vue";
import ContentEditorPage from "@/views/contents/ContentEditorPage.vue";
import {useAuthStore} from "@/stores/authStore.js";
import CreatorLayout from "@/views/creators/CreatorLayout.vue";
import ContentPage from "@/views/contents/ContentPage.vue";
import CreatorContent from "@/views/creators/CreatorContent.vue";
import CreatorHome from "@/views/creators/CreatorHome.vue";
import CTA01 from "@/views/CTA01.vue";
import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
import Utilitylinks from "@/views/documentation/utilitylinks.vue";
import ExclusiveContentCard from "@/views/creators/ExclusiveContentCard.vue";

const routes = [
    {
        path: '/cta01',
        component: CTA01
    },
    {
        path: '/landing',
        component: Home
    },
    {
        path: '/',
        redirect: '/@hutopy',
    },
    {
        path: '/browse',
        component: CreatorList
    },
    {
        path: '/content/editor',
        component: ContentEditorPage
    },
    {
        path: '/content/:contentId',
        component: ContentPage
    },
    {
        path: '/@:creator',
        component: CreatorLayout,
        children: [
            {
                path: '',
                component: CreatorHome,
            },
            {
                path: 'content',
                component: CreatorContent
            },
            {
                path: 'subscription',
                component: SubscriptionMenu
            },
            {
                path: 'exclusivecontentcard',
                component: ExclusiveContentCard
            },
        ]
    },
    {
        path: '/utilitylinks',
        component: Utilitylinks,
        children: [
            {
                path: 'helpandcontact',
                component: HelpAndContact
            },
            {
                path: 'termsandconditions',
                name: 'termsandconditions',
                component: TermsAndConditions
            },
            {
                path: 'contentpolicy',
                name: 'contentpolicy',
                component: ContentPolicy
            },
            {
                path: 'faq',
                name: 'FAQ',
                component: FAQ
            },
            {
                path: 'guideforcreators',
                name: 'guideforcreators',
                component: CreatorGuide
            },
            {
                path: 'about',
                name: 'about',
                component: About
            },
            {
                path: 'pricing',
                name: 'pricing',
                component: Pricing
            },
        ]
    },
    {
        path: '/content/post',
        component: PostContent,
    },
  
    {
        path: '/join',
        name: 'join',
        component: Join
    },
    {
        path: '/register',
        name: 'register',
        component: Register
    },
    {
        path: '/signup',
        name: 'signup',
        component: SignupView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
    {
        path: '/paymentcompleted',
        name: 'PaymentCompleted',
        component: PaymentCompleted,
        meta: {requiresAuth: true}
    },
    {
        path: '/wallet',
        name: 'wallet',
        component: Wallet,
        meta: {requiresAuth: true}
    },
    {
        path: '/profile',
        name: 'profile',
        component: ProfilePage,
        meta: {requiresAuth: true}
    }
]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
})

// Navigation guards
router.beforeEach((to, from, next) => {
    const authStore = useAuthStore();

    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!authStore.isAuthenticated) {
            next('/');
        } else {
            next();
        }
    } else {
        next();
    }
})

export default router;