ff-admin/src/router/index.ts

import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
import Login from "../views/Login.vue";

import { isAuthenticated } from "./authGuards";
import { loadAccountData } from "./accountGuard";
import { isSetup } from "./setupGuard";
import { abilityAndNavUpdate } from "./adminGuard";
import type { PermissionType, PermissionSection, PermissionModule } from "../types/permissionTypes";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      redirect: { name: "admin" },
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    {
      path: "/setup",
      name: "setup",
      component: () => import("../views/RouterView.vue"),
      beforeEnter: [isSetup],
      children: [
        {
          path: "",
          name: "setup-create",
          component: () => import("../views/setup/Setup.vue"),
        },
        {
          path: "verify",
          name: "setup-verify",
          component: () => import("../views/setup/Verify.vue"),
          props: (route) => ({ mail: route.query.mail, token: route.query.token }),
        },
      ],
    },
    {
      path: "/admin",
      name: "admin",
      component: () => import("../views/admin/View.vue"),
      beforeEnter: [isAuthenticated],
      children: [
        {
          path: "",
          name: "admin-default",
          component: () => import("../views/RouterView.vue"),
        },
        {
          path: "club",
          name: "admin-club",
          component: () => import("../views/RouterView.vue"),
          meta: { type: "read", section: "club" },
          beforeEnter: [abilityAndNavUpdate],
          children: [
            {
              path: "",
              name: "admin-club-default",
              component: () => import("../views/admin/ViewSelect.vue"),
              meta: { type: "read", section: "club" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "members",
              name: "admin-club-members",
              component: () => import("../views/admin/members/Overview.vue"),
              meta: { type: "read", section: "club", module: "members" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "calendar",
              name: "admin-club-calendar",
              component: () => import("../views/admin/members/Overview.vue"),
              meta: { type: "read", section: "club", module: "calendar" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "newsletter",
              name: "admin-club-newsletter",
              component: () => import("../views/admin/members/Overview.vue"),
              meta: { type: "read", section: "club", module: "newsletter" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "protocol",
              name: "admin-club-protocol",
              component: () => import("../views/admin/members/Overview.vue"),
              meta: { type: "read", section: "club", module: "protocoll" },
              beforeEnter: [abilityAndNavUpdate],
            },
          ],
        },
        {
          path: "settings",
          name: "admin-settings",
          component: () => import("../views/RouterView.vue"),
          meta: { type: "read", section: "settings" },
          beforeEnter: [abilityAndNavUpdate],
          children: [
            {
              path: "",
              name: "admin-settings-default",
              component: () => import("../views/admin/ViewSelect.vue"),
              meta: { type: "read", section: "settings" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "qualification",
              name: "admin-settings-qualification-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "settings", module: "qualification" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-settings-qualification",
                  component: () => import("../views/admin/settings/Qualification.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-settings-qualification-edit",
                  component: () => import("../views/admin/settings/QualificationEdit.vue"),
                  meta: { type: "update", section: "settings", module: "qualification" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
            {
              path: "award",
              name: "admin-settings-award-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "settings", module: "award" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-settings-award",
                  component: () => import("../views/admin/settings/Award.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-settings-award-edit",
                  component: () => import("../views/admin/settings/AwardEdit.vue"),
                  meta: { type: "update", section: "settings", module: "award" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
            {
              path: "executive-position",
              name: "admin-settings-executive_position",
              component: () => import("../views/admin/settings/ExecutivePosition.vue"),
              meta: { type: "read", section: "settings", module: "executive_position" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "executive-position",
              name: "admin-settings-executive_position-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "settings", module: "executive_position" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-settings-executive_position",
                  component: () => import("../views/admin/settings/ExecutivePosition.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-settings-executive_position-edit",
                  component: () => import("../views/admin/settings/ExecutivePositionEdit.vue"),
                  meta: { type: "update", section: "settings", module: "executive_position" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
            {
              path: "communication",
              name: "admin-settings-communication-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "settings", module: "communication" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-settings-communication",
                  component: () => import("../views/admin/settings/CommunicationType.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-settings-communication-edit",
                  component: () => import("../views/admin/settings/CommunicationTypeEdit.vue"),
                  meta: { type: "update", section: "settings", module: "communication" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
            {
              path: "status",
              name: "admin-settings-membership_status-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "settings", module: "membership_status" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-settings-membership_status",
                  component: () => import("../views/admin/settings/MembershipStatus.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-settings-membership_status-edit",
                  component: () => import("../views/admin/settings/MembershipStatusEdit.vue"),
                  meta: { type: "update", section: "settings", module: "membership_status" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
          ],
        },
        {
          path: "user",
          name: "admin-user",
          component: () => import("../views/RouterView.vue"),
          meta: { type: "read", section: "user" },
          beforeEnter: [abilityAndNavUpdate],
          children: [
            {
              path: "",
              name: "admin-user-default",
              component: () => import("../views/admin/ViewSelect.vue"),
              meta: { type: "read", section: "user" },
              beforeEnter: [abilityAndNavUpdate],
            },
            {
              path: "user",
              name: "admin-user-user-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "user", module: "user" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-user-user",
                  component: () => import("../views/admin/user/User.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-user-user-edit",
                  component: () => import("../views/admin/user/UserEdit.vue"),
                  meta: { type: "update", section: "user", module: "user" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
                {
                  path: ":id/permission",
                  name: "admin-user-user-permission",
                  component: () => import("../views/admin/user/UserEditPermission.vue"),
                  meta: { type: "update", section: "user", module: "user" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
                {
                  path: ":id/roles",
                  name: "admin-user-user-roles",
                  component: () => import("../views/admin/user/UserEditRoles.vue"),
                  meta: { type: "update", section: "user", module: "user" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
            {
              path: "role",
              name: "admin-user-role-route",
              component: () => import("../views/RouterView.vue"),
              meta: { type: "read", section: "user", module: "role" },
              beforeEnter: [abilityAndNavUpdate],
              children: [
                {
                  path: "",
                  name: "admin-user-role",
                  component: () => import("../views/admin/user/Role.vue"),
                },
                {
                  path: ":id/edit",
                  name: "admin-user-role-edit",
                  component: () => import("../views/admin/user/RoleEdit.vue"),
                  meta: { type: "update", section: "user", module: "role" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
                {
                  path: ":id/permission",
                  name: "admin-user-role-permission",
                  component: () => import("../views/admin/user/RoleEditPermission.vue"),
                  meta: { type: "update", section: "user", module: "role" },
                  beforeEnter: [abilityAndNavUpdate],
                  props: true,
                },
              ],
            },
          ],
        },
        {
          path: ":pathMatch(.*)*",
          name: "admin-404",
          component: () => import("../views/notFound.vue"),
        },
      ],
    },
    {
      path: "/nopermissions",
      name: "nopermissions",
      component: () => import("../views/NoPermission.vue"),
    },
    {
      path: "/:pathMatch(.*)*",
      name: "404",
      component: () => import("../views/notFound.vue"),
    },
  ],
});

export default router;

declare module "vue-router" {
  interface RouteMeta {
    type?: PermissionType | "admin";
    section?: PermissionSection;
    module?: PermissionModule;
  }
}