📌 Nuxt에는 공식적인 middleware 개념이 있지만, Vue에서는 네비게이션 가드를 활용하여 비슷한 기능을 구현가능.
📌 로그 기록, 인증(로그인 체크) 같은 공통 로직을 미들웨어로 만들어 관리하면 코드가 깔끔해지고 유지보수가 쉬워진다.
1. Vue에서 미들웨어처럼 동작하는 라우트 가드
Vue에서는 라우터 가드(Navigation Guards) 를 활용하면 Nuxt의 middleware처럼 동작하도록 만들 수 있다.
| 적용 방식 | 설명 | 사용 예시 |
| 전역 미들웨어 (beforeEach) | 모든 페이지 전환 전에 실행 | 로그인 체크, 로그 기록 |
| 전역 완료 후 미들웨어 (afterEach) | 페이지 이동 후 실행 | 페이지 타이틀 변경, 분석 툴 연동 |
| 개별 라우트 미들웨어 (beforeEnter) | 특정 페이지에서만 실행 | 관리자 페이지 접근 제한 |
| meta를 활용한 미들웨어 | 라우트별로 동적 미들웨어 적용 | 여러 미들웨어 체인 실행 |
2. 프로젝트 구조
✅ 미들웨어를 별도 파일로 분리하여 관리하면 유지보수가 쉬움
✅ 라우트마다 meta를 활용해 미들웨어 적용 가능
3. middlewares/ 폴더에서 미들웨어 정의하기
📌 middlewares/authGuard.js (로그인 체크)
export function authGuard(to) {
const isAuthenticated = localStorage.getItem('auth'); // 로그인 여부 확인
if (!isAuthenticated) {
alert('로그인이 필요합니다!');
return { path: '/login' }; // 로그인 페이지로 리디렉트
}
}📌 middlewares/logGuard.js (페이지 이동 로그)
export function logGuard(to, from) {
console.log(`🚀 페이지 이동: ${from.path} → ${to.path}`);
}✅ 로그만 기록하는 미들웨어이므로 return 값을 사용하지 않음
📌 middlewares/globalGuard.js (전역 미들웨어)
export function globalGuard(to, from) {
console.log(`🌍 전역 미들웨어 실행: ${from.path} → ${to.path}`);
// 여기에 공통적인 페이지 권한 체크, 애널리틱스 로깅 등을 추가할 수 있음.
}✅ 모든 라우트 이동 전에 실행되는 전역 미들웨어
✅ 공통적으로 적용해야 하는 로직을 여기에 추가 가능
4. router/index.js에서 전역 미들웨어와 meta 기반 미들웨어 적용
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'
import AdminPage from '../views/AdminPage.vue'
import { authGuard } from '../middlewares/authGuard'
import { logGuard } from '../middlewares/logGuard'
import { globalGuard } from '../middlewares/globalGuard'
import LoginPage from '@/views/LoginPage.vue'
const routes = [
{
path: '/',
component: HomePage,
meta: { middlewares: [logGuard] }, // ✅ 로그 미들웨어 적용
},
{
path: '/admin',
component: AdminPage,
meta: { middlewares: [authGuard, logGuard] }, // ✅ 로그인 + 로그 미들웨어 적용
},
{
path: '/login',
component: LoginPage,
meta: { middlewares: [logGuard] }, // ✅ 로그 미들웨어 적용
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
// 🔥 `meta.middlewares` 기반으로 공통 미들웨어 실행 + 전역 미들웨어 추가
router.beforeEach(async (to, from) => {
// 전역 미들웨어 실행
globalGuard(to, from)
// `meta.middlewares` 기반으로 개별 미들웨어 실행
if (to.meta.middlewares) {
for (const guard of to.meta.middlewares) {
const result = await guard(to, from)
if (result === false) return false // ❌ 이동 차단
if (result) return result // 🔄 리디렉션 (예: `{ path: '/login' }`)
}
}
})
// ✅ 페이지 이동 후 실행되는 후처리 미들웨어
router.afterEach((to) => {
document.title = to.meta.title || 'Vue App' // 페이지 제목 동적 변경
console.log(`✅ 페이지 변경 완료: ${to.fullPath}`)
})
export default router✅ 전역 미들웨어(globalGuard)를 beforeEach에서 실행
✅ 후처리 미들웨어(afterEach)에서 페이지 타이틀 변경 및 로그 기록
5. 미들웨어가 잘 작동하는지 확인하기 (App.vue)
<template>
<div>
<nav>
<RouterLink to="/admin">Admin</RouterLink> |
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/login">Login</RouterLink>
</nav>
<RouterView />
</div>
</template>✅ 라우트 이동 시 미들웨어가 실행됨
✅ 관리자 페이지에 접근하면 로그인 여부를 확인하고, 로그인 안 된 경우 로그인 페이지로 리디렉션
✅ 페이지 이동 후 타이틀이 변경되며, afterEach에서 로그가 출력됨
6. 동작확인
🔥 최종 정리
✔ return false → 이동 차단 / return { path: '/login' } → 리디렉션 가능
✔ 미들웨어를 middlewares/ 폴더에서 관리하여 코드 유지보수성을 높일 수 있음
✔ 전역 미들웨어(globalGuard), 개별 미들웨어(meta.middlewares), 후처리 미들웨어(afterEach)를 활용하여 유연하게 적용 가능