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 가 실패한다. 이 경우 목적지로 전체 새로고침해 최신 index.html 을 받게 한다.
let reloadingForChunk = false
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 && !reloadingForChunk) {
    reloadingForChunk = true
    window.location.assign(to?.fullPath || window.location.pathname)
  }
})

export default router