네비게이션 가드

 네비게이션 가드는 Vue Router에서 제공하는 기능으로, 라우트 전환 전후에 실행되는 함수를 통해 네비게이션을 제어하는 기능입니다. 네비게이션 가드를 사용하면 특정 조건에 따라 라우트 전환을 막거나 허용하고, 필요한 데이터를 미리 로드하거나 사용자 인증을 검사할 수 있습니다. 이제 네비게이션 가드에 대해 자세히 알아봅시다.

1. 전역 네비게이션 가드

전역 네비게이션 가드는 애플리케이션 전역에서 모든 라우트 전환에 적용되는 가드입니다. beforeEach, beforeResolve, afterEach와 같은 라우터 인스턴스 메소드를 사용하여 전역 네비게이션 가드를 등록할 수 있습니다.

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

router.beforeEach((to, from, next) => {
  // 네비게이션 전환 전 실행될 로직
  next();
});

router.afterEach((to, from) => {
  // 네비게이션 전환 후 실행될 로직
});

beforeEach 메소드는 네비게이션 전환 전에 실행되며, afterEach 메소드는 네비게이션 전환 후에 실행됩니다. 각 메소드의 콜백 함수는 to, from, next 인자를 받습니다. to는 전환하려는 라우트 객체, from은 현재 라우트 객체, next는 네비게이션을 계속 진행하기 위해 호출되는 함수입니다.

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

라우트별 네비게이션 가드는 특정 라우트에만 적용되는 가드입니다. beforeEnter 속성을 사용하여 라우트별 네비게이션 가드를 등록할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 특정 라우트 전환 전 실행될 로직
        next();
      },
    },
  ],
});

위의 코드에서 /admin 라우트에 beforeEnter 속성을 사용하여 라우트별 네비게이션 가드를 등록하였습니다. 해당 라우트로 전환하기 전에 콜백 함수가 실행되며, 적절한 로직을 처리한 뒤 next를 호출하여 네비게이션을 계속 진행할 수 있습니다.

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

컴포넌트 내에서도 네비게이션 가드를 사용할 수 있습니다. 이는 특정 컴포넌트에 대한 네비게이션을 제어하고 컴포넌트 자체적인 로직을 처리하기 위한 용도로 사용됩니다. 컴포넌트 내에서 네비게이션 가드를 등록하려면 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave와 같은 라이프사이클 훅을 사용합니다.

export default {
  beforeRouteEnter(to, from, next) {
    // 컴포넌트 진입 전 실행될 로직
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 라우트 업데이트 전 실행될 로직
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 컴포넌트 이탈 전 실행될 로직
    next();
  },
};

각 라이프사이클 훅은 to, from, next 인자를 받습니다. beforeRouteEnter는 컴포넌트 진입 전, beforeRouteUpdate는 라우트 업데이트 전, beforeRouteLeave는 컴포넌트 이탈 전에 실행됩니다.

네비게이션 가드는 라우팅의 제어와 유연한 기능을 제공합니다. 위의 내용을 참고하여 전역 네비게이션 가드, 라우트별 네비게이션 가드, 컴포넌트 내 네비게이션 가드를 구현해보세요. 이를 통해 네비게이션 흐름을 제어하고 필요한 작업을 수행할 수 있습니다.