sb-front/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UsersView.vue'),
      meta: { requiresAuth: true, requiresAdmin: true },
    },
    {
      path: '/board',
      name: 'board',
      component: () => import('../views/board/BoardListView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/board/write',
      name: 'board-write',
      component: () => import('../views/board/BoardWriteView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/board/:id(\\d+)',
      name: 'board-detail',
      component: () => import('../views/board/BoardDetailView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/board/:id(\\d+)/edit',
      name: 'board-edit',
      component: () => import('../views/board/BoardWriteView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/admin/tags',
      name: 'admin-tags',
      component: () => import('../views/admin/TagAdminView.vue'),
      meta: { requiresAuth: true, requiresAdmin: true },
    },
    {
      path: '/account',
      name: 'account',
      component: () => import('../views/account/AccountDashboardView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/account/entries',
      name: 'account-entries',
      component: () => import('../views/account/AccountView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/account/tags',
      name: 'account-tags',
      component: () => import('../views/account/AccountTagView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/account/wallets',
      name: 'account-wallets',
      component: () => import('../views/account/AccountWalletView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/account/categories',
      name: 'account-categories',
      component: () => import('../views/account/CategoryView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/account/budget',
      name: 'account-budget',
      component: () => import('../views/account/BudgetView.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/account/recurrings',
      name: 'account-recurrings',
      component: () => import('../views/account/RecurringView.vue'),
      meta: { requiresAuth: true },
    },
  ],
})

// 전역 네비게이션 가드
router.beforeEach((to, from) => {
  const auth = useAuthStore()
  // 인증이 필요한 페이지인데 미로그인 → 로그인 팝업 오픈 (원래 목적지 보존), 이동은 취소/홈
  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    const ui = useUiStore()
    ui.openLogin(to.fullPath)
    return from.name ? false : { name: 'home' }
  }
  // 관리자 전용 페이지 — 비관리자는 홈으로
  if (to.meta.requiresAdmin && auth.user?.role !== 'ADMIN') {
    return { name: 'home' }
  }
})

// 새 배포로 청크 해시가 바뀐 뒤, 캐시된 옛 index.html 이 삭제된 옛 청크를 부르면
// 동적 import 가 실패한다. 이 경우 목적지로 1회 전체 새로고침해 최신 index.html 을 받게 한다.
// (경로별 1회만 — 새로고침 후에도 실패하면 무한 새로고침/로그인 루프를 막기 위해 중단)
router.onError((err, to) => {
  const msg = (err && err.message) || ''
  const chunkError = /dynamically imported module|Importing a module script failed|Failed to fetch dynamically imported module|ChunkLoadError|error loading dynamically imported module/i.test(msg)
  if (!chunkError) return
  const path = to?.fullPath || window.location.pathname
  const key = 'chunk-reload:' + path
  if (sessionStorage.getItem(key)) return // 이미 한 번 새로고침했는데 또 실패 → 루프 방지
  sessionStorage.setItem(key, '1')
  window.location.assign(path)
})
// 정상 진입 시 해당 경로의 새로고침 플래그 정리 (다음 배포 때 다시 동작하도록)
router.afterEach((to) => {
  sessionStorage.removeItem('chunk-reload:' + to.fullPath)
})

export default router