FrontendVueTailwind

[Vue 3] Vue Route - 네비게이션 가드

참고

🌐 네비게이션 가드

Vue 3 를 이용해 개발하다보면, 사용자의 인증 여부에 따라 페이지 접근을 제한하거나, 페이지 전환 전/후에 특정 로직을 실행하고 싶을 때가 있습니다.

SSR 웹사이트의 경우 서버가 요청을 받아서 처리를 하면 되지만, CSR 인 Vue 에서는 Client 에서 페이지 이동을 확인해야 합니다. 다행히 Vue Router 에서는 Router 를 탈때 특정 로직 수행을 위해 네비게이션 가드 를 제공합니다.

네비게이션 가드 는 라우터 전환 시점에 개입할 수 있게 해주는 훅 입니다.

🛡️ 전역 가드

전역 가드는 애플리케이션 전체에 적용되며, 모든 라우트 변경 시 실행됩니다.

  • beforeEach: 모든 라우팅 전에 실행
  • beforeResolve: 컴포넌트 렌더링 전 비동기 작업
  • afterEach: 라우팅 완료 후 작업
const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  // 인증 여부 확인
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 로그인 페이지로 리다이렉트
  } else {
    next(); // 라우트 진행
  }
});

이 예제에서는 meta.requiresAuth가 true인 라우트에 대해 인증 여부를 확인하고, 인증되지 않은 경우 로그인 페이지로 리다이렉트합니다. ​

🛡️ 라우터별 가드 - beforeEnter

beforeEnter 는 특정 라우트 진입 전

전역 가드보다 먼저 실행되며, 특정 페이지에서만 실행시키고 싶은 로직이 있을 경우 적용할 수 있습니다.

{
  path: '/admin',
  component: AdminView,
  beforeEnter: (to, from, next) => {
    const isAdmin = checkUserIsAdmin()
    if (!isAdmin) next('/unauthorized')
    else next()
  }
}

🛡️ 컴포넌트 내 가드

컴포넌트 내 가드는 컴포넌트 진입 전/후/변경시

✅ beforeRouteEnter

beforeRouteEnter 는 컴포넌트 진입 전에 실행되는 가드입니다. 실제로는 beforeRouteEnter 대신에 beforeCreate 나 onMounted 를 많이 사용 했었어서 생각보다 자주 사용되지는 않는 가드 같습니다.

beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.loadData()
  })
}

✅ beforeRouteUpdate

beforeRouteUpdate 에서 같은 컴포넌트 에서 라우트 파라미터 변경시에 사용되는 가드입니다. beforeRouteUpdate 를 사용하게 되면 마운트 과정을 거치지 않기 때문에 onMounted 는 호출되지 않습니다.

beforeRouteUpdate(to, from, next) {
  this.fetchNewData(to.params.id)
  next()
}

✅ beforeRouteLeave

beforeRouteLeave 는 컴포넌트 떠나기 전에 실행되는 가드입니다. 보통 데이터의 저장 없이 페이지를 떠나는 경우 페이지 이동을 확인하기 위해 많이 사용하는 가드입니다.

onBeforeRouteLeave((to, from, next) => {
  if (isDirty.value) {
    const confirmLeave = window.confirm('변경사항이 저장되지 않았습니다. 나가시겠습니까?')
    if (!confirmLeave) {
      return next(false) // 이탈 취소
    }
  }
  next()
})
Share