[javascript] Vue Router의 네비게이션 가드 훅

18 Dec 2023

javascript

Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하는 데 사용되는 공식 라이브러리입니다. 네비게이션 가드 훅은 Vue Router에서 네비게이션 이벤트를 감지하여 애플리케이션을 보호하고 제어하는 데 사용됩니다.

전역 네비게이션 가드

전역 네비게이션 가드는 라우터 인스턴스의 beforeEach 메서드를 사용하여 모든 라우트 변경 이벤트를 가로채고 제어할 수 있습니다. 이를 통해 로그인 여부를 확인하거나 권한을 확인하여 특정 페이지로의 접근을 거부할 수 있습니다.

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

router.beforeEach((to, from, next) => {
  // 여기에 네비게이션 가드 로직을 작성합니다.
  next(); // 다음 단계로 이동
});

라우트별 네비게이션 가드

라우트별 네비게이션 가드는 라우터 인스턴스에 직접 정의된 beforeEnter 훅을 이용하여 특정 라우트에 대한 접근을 제어할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        // 여기에 라우트별 네비게이션 가드 로직을 작성합니다.
        next(); // 다음 단계로 이동
      },
    },
  ],
});

컴포넌트 내 네비게이션 가드

컴포넌트 내 네비게이션 가드를 사용하여 특정 컴포넌트에 진입하기 전후에 추가적인 로직을 수행할 수 있습니다. 이를 통해 컴포넌트 내에서 필요한 전처리나 후처리 작업을 수행할 수 있습니다.

export default {
  beforeRouteEnter(to, from, next) {
    // 여기에 컴포넌트 내 네비게이션 가드 로직을 작성합니다.
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 여기에 컴포넌트 내 네비게이션 가드 로직을 작성합니다.
    next();
  },
};

네비게이션 가드 훅을 사용하여 Vue Router에서 라우팅 이벤트를 감지하고 효율적으로 제어할 수 있습니다.

참고 자료

Vue Router 공식 문서: Vue Router Docs
Vue.js 공식 사이트: Vue.js