[javascript] Vue Router의 미들웨어 용례

18 Dec 2023

javascript

Vue Router는 미들웨어를 사용하여 라우팅 전에 특정 동작을 실행할 수 있습니다. 이는 인증, 권한 부여, 로깅 등과 같은 작업에 유용합니다.

미들웨어 함수 정의

미들웨어 함수는 다음과 같이 정의할 수 있습니다.

// authMiddleware.js
export default function(to, from, next) {
  if (!isLoggedIn) {
    next('/login');
  } else {
    next();
  }
}

Vue Router에서 미들웨어 사용

Vue Router에서 미들웨어를 사용하려면 beforeEach 메서드를 이용하여 라우팅 이전에 미들웨어를 호출할 수 있습니다.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import authMiddleware from './authMiddleware';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/dashboard', component: Dashboard, beforeEnter: authMiddleware }
  ]
});

export default router;

위의 코드에서 beforeEnter에 미들웨어 함수를 설정하여 ‘/dashboard’로 이동하기 전에 authMiddleware가 실행되도록 할 수 있습니다.

이제 위의 예제를 통해 Vue Router에서 미들웨어를 활용하는 방법에 대해 알아보았습니다.

더 자세한 정보는 Vue Router 공식 문서를 참고하세요.