hrms-checkin/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import MapView from '@/views/MapView.vue'
import MainView from '@/views/MainView.vue'

const loginView = () => import('@/views/login.vue')
const resetPasswordView = () => import('@/views/ResetPassword.vue')
const noPositionView = () => import('@/views/NoPositionView.vue')

import { authenticated, logout } from '@/plugins/auth'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'main',
      component: MainView,
      children: [
        {
          path: '/',
          name: 'home',
          component: HomeView,
          meta: {
            Auth: true,
          },
        },
        // {
        //   path: '/map',
        //   name: 'map',
        //   component: MapView,
        //   meta: {
        //     Auth: true,
        //   },
        // },
        {
          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('@/views/AboutView.vue'),
          meta: {
            Auth: true,
          },
        },
        {
          path: '/history',
          name: 'history',
          component: () => import('@/views/HistoryView.vue'),
          meta: {
            Auth: false,
          },
        },
        /**
         * 404 Not Found
         * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
         */
        {
          path: '/:pathMatch(.*)*',
          name: 'NotFound',
          component: () => import('@/views/ErrorNotFoundPage.vue'),
          meta: {
            Auth: true,
          },
        },
      ],
    },
    // authen with keycloak client
    {
      path: '/login',
      name: 'loginMain',
      component: loginView,
      meta: {
        Auth: false,
      },
    },
    {
      path: '/auth',
      name: 'auth',
      component: () => import('@/views/auth.vue'),
    },
    {
      path: '/reset-password',
      name: 'reset-password',
      component: resetPasswordView,
      meta: {
        Auth: false,
      },
    },
    {
      path: '/no-position',
      name: 'no-position',
      component: noPositionView,
      meta: {
        Auth: false,
      },
    },
  ],
})

// authen with keycloak client
router.beforeEach(async (to, from, next) => {
  // ตรวจสอบเส้นทางพิเศษที่ไม่ต้องตรวจสอบสิทธิ์
  const publicPaths = ['/login', '/auth', '/reset-password', '/no-position']
  if (publicPaths.includes(to.path)) {
    next()
    return
  }

  // ตรวจสอบการ authenticate
  if (to.meta.Auth) {
    const checkAuthen = await authenticated()
    if (!checkAuthen && to.meta.Auth) {
      logout()
      return
    }
  }

  // ตรวจสอบว่าผู้ใช้มีข้อมูลสังกัดหรือไม่
  // ต้องทำการ dynamic import เนื่องจากเป็นการใช้งาน Pinia store ใน router
  if (to.path !== '/no-position') {
    try {
      const { usePositionKeycloakStore } = await import('@/stores/positionKeycloak')
      const positionKeycloakStore = usePositionKeycloakStore()
      const dataPositionKeycloak = positionKeycloakStore.dataPositionKeycloak

      // ถ้ามีข้อมูล positionKeycloak แล้ว ให้ตรวจสอบว่ามี organization หรือไม่
      if (dataPositionKeycloak) {
        const hasOrganization =
          dataPositionKeycloak.organization &&
          (dataPositionKeycloak.organization.root ||
            dataPositionKeycloak.organization.child1 ||
            dataPositionKeycloak.organization.child2 ||
            dataPositionKeycloak.organization.child3 ||
            dataPositionKeycloak.organization.child4)

        if (!hasOrganization) {
          next('/no-position')
          return
        }
      }
    } catch (error) {
      console.error('Error checking position:', error)
    }
  }

  next()
})

export default router