miriamgemeinde/src/router.js

import { createRouter, createWebHistory } from 'vue-router';
import store from './store';

function loadComponent(componentName) {
  return () => {
    if (!componentName) {
      return import('./content/DefaultComponent.vue'); 
    }
    return import(`./content/${componentName}.vue`);
  };
}

function generateRoutesFromMenu(menu) {
  let routes = [];
  menu.forEach(item => {
    if (item.link === '/admin/edit-pages') {
      return;
    }

    let route = null;
    if (item.link && item.link !== '') {
      route = {
        path: item.link,
        meta: { requiresAuth: item.requiresAuth || false },
        components: {
          default: loadComponent(item.component),
          rightColumn: loadComponent('ImageContent')
        }
      };
    }

    if (item.submenu && item.submenu.length > 0) {
      let children = generateRoutesFromMenu(item.submenu);
      routes.push(...children);
    }
    if (route) {
      routes.push(route);
    }
  });
  return routes;
}

const router = createRouter({
  history: createWebHistory(),
  routes: []
});

router.beforeEach(async (to, from, next) => {
  if (!store.state.menuData.length) {
    await store.dispatch('loadMenuData');
    const routes = generateRoutesFromMenu(store.state.menuData);
    routes.forEach(route => router.addRoute(route));
    addEditPagesRoute();
    addRegisterRoute();
    addForgotPasswordRoute();
    addResetPasswordRoute();
    addAuthLoginRoute();
    router.addRoute({
      path: '/:pathMatch(.*)*',
      components: {
        default: loadComponent('DefaultComponent'),
        rightColumn: loadComponent('ImageContent')
      }
    });

    next({ ...to, replace: true });
  } else {
    if (to.matched.some(record => record.meta.requiresAuth) && !store.getters.isLoggedIn) {
      next('/login');
    } else {
      next();
    }
  }
});

function addEditPagesRoute() {
  if (router.hasRoute('/admin/edit-pages')) {
    router.removeRoute('/admin/edit-pages');
  }
  router.addRoute({
    path: '/admin/edit-pages',
    components: {
      default: loadComponent('admin/PagePreviewComponent'),
      rightColumn: loadComponent('admin/EditPagesComponent')
    },
    name: 'admin-edit-pages'
  });
}

function addRegisterRoute() {
  if (router.hasRoute('/register')) {
    router.removeRoute('/register');
  }
  router.addRoute({
    path: '/register',
    components: {
      default: () => import('./content/authentication/RegisterContent.vue'),
      rightColumn: loadComponent('ImageContent')
    },
    name: 'register'
  });
}

function addForgotPasswordRoute() {
  if (router.hasRoute('/forgot-password')) {
    router.removeRoute('/forgot-password');
  }
  router.addRoute({
    path: '/forgot-password',
    components: {
      default: () => import('./content/authentication/ForgotPasswordContent.vue'),
      rightColumn: loadComponent('ImageContent')
    },
    name: 'forgot-password'
  });
}

function addResetPasswordRoute() {
  if (router.hasRoute('/reset-password')) {
    router.removeRoute('/reset-password');
  }
  router.addRoute({
    path: '/reset-password',
    components: {
      default: () => import('./content/authentication/ResetPasswordContent.vue'),
      rightColumn: loadComponent('ImageContent')
    },
    name: 'reset-password'
  });
}

function addAuthLoginRoute() {
  if (router.hasRoute('/auth/login')) {
    router.removeRoute('/auth/login');
  }
  router.addRoute({
    path: '/auth/login',
    components: {
      default: () => import('./content/authentication/LoginContent.vue'),
      rightColumn: loadComponent('ImageContent')
    },
    name: 'auth-login'
  });
}

addEditPagesRoute();
addRegisterRoute();
addForgotPasswordRoute();
addResetPasswordRoute();
addAuthLoginRoute();

export default router;