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

18 Dec 2023

javascript

Vue Router는 단일 페이지 애플리케이션을 구축하기 위한 라이브러리로서, 라우팅과 관련된 다양한 기능을 제공합니다. Vue Router의 미들웨어는 라우터로 접근하기 전에 실행되는 함수로서, 전역적 또는 특정 라우트에 적용될 수 있습니다.

전역 미들웨어

전역 미들웨어는 애플리케이션 내의 모든 라우트에 적용됩니다. 보안 검사나 사용자 인증과 같은 전체 애플리케이션에 필요한 작업을 수행할 때 유용합니다.

예를 들어, 사용자가 로그인한 상태인지를 확인하고, 그에 따라 접근 권한을 부여하는 데 사용될 수 있습니다.

// 전역 미들웨어 정의
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 사용자가 인증되어 있는지 확인
    if (!auth.loggedIn) {
      // 로그인 페이지로 리다이렉트
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

지역 미들웨어

특정 라우트에만 적용되는 미들웨어를 정의할 수도 있습니다. 이를 통해 특정 페이지나 페이지 그룹에 대한 접근 제어를 할 수 있습니다.

예를 들어, 어드민 페이지에 접근할 때만 어드민 권한이 있는 사용자라면 내부 페이지로 접근할 수 있도록 해주는 등에 사용될 수 있습니다.

// 지역 미들웨어 정의
const adminMiddleware = (to, from, next) => {
  if (store.getters.isAdmin) {
    next();
  } else {
    next('/403');
  }
}

// 라우트 설정
{
  path: '/admin',
  component: AdminPanel,
  beforeEnter: adminMiddleware
}

Vue Router의 미들웨어를 활용하여 전역적이거나 특정 라우트에 대한 접근 제어나 인증 관련 작업을 효율적으로 처리할 수 있습니다.

참고 자료

Vue Router 공식 문서