crowd-funder-from-jason/src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import { useAccountStore } from "../store/account";
import HomeView from "../views/HomeView.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/start",
    name: "start",
    component: () =>
      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
  },
  {
    path: "/account",
    name: "account",
    component: () =>
      import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
  },
  {
    path: "/confirm-contact",
    name: "confirm-contact",
    component: () =>
      import(
        /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
      ),
  },
  {
    path: "/scan-contact",
    name: "scan-contact",
    component: () =>
      import(
        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
      ),
  },
  {
    path: "/discover",
    name: "discover",
    component: () =>
      import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
  },
  {
    path: "/import-account",
    name: "import-account",
    component: () =>
      import(
        /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
      ),
  },
  {
    path: "/new-edit-account",
    name: "new-edit-account",
    component: () =>
      import(
        /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
      ),
  },
  {
    path: "/new-edit-commitment",
    name: "new-edit-commitment",
    component: () =>
      import(
        /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
      ),
  },
  {
    path: "/new-edit-project",
    name: "new-edit-project",
    component: () =>
      import(
        /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
      ),
  },
  {
    path: "/project",
    name: "project",
    component: () =>
      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
  },
  {
    path: "/projects",
    name: "projects",
    component: () =>
      import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
  },
  {
    path: "/commitments",
    name: "commitments",
    component: () =>
      import(
        /* webpackChunkName: "commitments" */ "../views/CommitmentsView.vue"
      ),
  },
];

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

router.beforeEach(async (to) => {
  // redirect to start page if no account
  const publicPages = ["/start", "/account", "/import-account"];
  const authRequired = !publicPages.includes(to.path);
  const authStore = useAccountStore();

  if (authRequired && !authStore.account) {
    return "/start";
  }
});
export default router;