[javascript] Vue Router를 이용한 네비게이션 가드

18 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 빌드하기 위한 진보된 JavaScript 프레임워크로, Vue Router를 이용하면 싱글 페이지 애플리케이션을 쉽게 관리할 수 있습니다.

네비게이션 가드는 라우터 네비게이션을 제어하고 조작하는 기능을 제공하여, 특정 조건을 충족시키지 않는 경우에 네비게이션을 중지하거나 리디렉션할 수 있습니다.

Vue Router를 사용하여 네비게이션 가드를 구현하는 방법을 알아보겠습니다.

글로벌 네비게이션 가드

글로벌 네비게이션 가드는 애플리케이션 전역에서 작동하는 네비게이션 가드로, 모든 라우팅 이벤트에 적용됩니다.

const router = new VueRouter({
  routes: [...],
});

router.beforeEach((to, from, next) => {
  // 네비게이션 이전에 수행할 작업
  if (/* 조건 충족 여부 확인 */) {
    next(); // 허용
  } else {
    next('/login'); // 리디렉션
  }
});

라우트별 네비게이션 가드

라우트별 네비게이션 가드는 특정 라우트에 대해 선언하고 작동하는 네비게이션 가드입니다.

const router = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      beforeEnter: (to, from, next) => {
        // 해당 라우트로의 네비게이션 이전에 수행할 작업
        if (/* 조건 충족 여부 확인 */) {
          next(); // 허용
        } else {
          next('/login'); // 리디렉션
        }
      },
    },
  ],
});

네비게이션 가드를 이용하여 애플리케이션의 라우팅을 보다 효과적으로 관리할 수 있습니다.

더 자세한 내용은 Vue Router 공식 문서를 참고하세요.