social-media/src/router/router.js

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

const routes = [
  {
    path: '/cta01',
    component: CTA01,
  },
  {
    path: '/landing',
    name: 'landing',
    component: Home,
  },
  {
    path: '/',
    redirect: { name: 'landing' },
  },
  {
    path: '/browse',
    component: CreatorList,
    redirect: { name: 'landing' }, // TODO remove this line when the page is ready
  },
  {
    path: '/content/editor',
    component: ContentEditorPage,
  },
  {
    path: '/content/:contentId',
    component: ContentPage,
  },
  {
    path: '/@:creator',
    component: CreatorLayout,
    name: 'creator',
    children: [
      {
        path: '',
        component: CreatorHome,
      },
      {
        path: 'content',
        component: CreatorContent,
      },
      {
        path: 'subscription',
        component: SubscriptionMenu,
        redirect: { name: 'creator' }, // TODO remove this line when the page is ready
      },
      {
        path: 'exclusivecontentcard',
        component: ExclusiveContentCard,
      },
    ],
  },
  {
    path: '/documents',
    component: DocumentationLayout,
    children: [
      {
        path: '',
        component: DocumentationHome,
        redirect: { name: 'about' }, // TODO remove this line when the page is ready
      },
      {
        path: 'helpandcontact',
        name: '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,
    redirect: { name: 'landing' }, // TODO remove this line when the page is ready
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView,
    meta: { notAuthenticated: true },
  },
  {
    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({ name: 'login' });
  } else if (to.matched.some((record) => record.meta.notAuthenticated)) {
    if (authStore.isAuthenticated) next({ name: 'landing' });
  }
  next();
});

export default router;