[javascript] Vue Router의 네비게이션 가드 사용법 자세히 알아보기

18 Dec 2023

javascript

Vue Router는 네비게이션 가드라는 기능을 제공하여 라우터 네비게이션을 통제할 수 있게 합니다. 네비게이션 가드를 사용하면 사용자가 페이지를 이동할 때 특정 규칙을 적용할 수 있으며, 이를 통해 페이지 접근 권한을 조절하거나 페이지 이동 전에 추가 작업을 수행할 수 있습니다.

1. 전역 네비게이션 가드

Vue Router에서는 전역 네비게이션 가드를 등록하여 모든 라우팅 이벤트에 대해 적용할 수 있습니다. 이를 위해 beforeEach 메소드를 사용하여 전역으로 라우터 네비게이션을 가로챌 수 있습니다.

const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  // 네비게이션 가드 로직 작성
  if (/* 특정 조건 */) {
    next(); // 다음 단계로 진행
  } else {
    next('/unauthorized'); // 다른 경로로 리다이렉트
  }
});

2. 라우트별 네비게이션 가드

특정 라우트에만 네비게이션 가드를 적용하는 경우엔 라우트 설정 객체 내에서 beforeEnter 속성을 활용할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 네비게이션 가드 로직 작성
        if (/* 특정 조건 */) {
          next(); // 다음 단계로 진행
        } else {
          next('/unauthorized'); // 다른 경로로 리다이렉트
        }
      }
    }
  ]
});

3. 컴포넌트 내 가드

특정 컴포넌트에 대해 네비게이션 가드를 적용하려면, 해당 컴포넌트 내에서 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 라이프사이클 훅을 사용할 수 있습니다.

export default {
  beforeRouteEnter (to, from, next) {
    // 네비게이션 가드 로직 작성
    if (/* 특정 조건 */) {
      next(); // 다음 단계로 진행
    } else {
      next('/unauthorized'); // 다른 경로로 리다이렉트
    }
  },
  beforeRouteLeave (to, from, next) {
    // ...
  }
}

마무리

Vue Router의 네비게이션 가드를 통해 라우터 네비게이션에 대한 세밀한 제어를 할 수 있습니다. 각각의 방법은 다양한 상황에 맞는 유연한 네비게이션 제어를 가능하게 합니다.

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