Vue Router : 네비게이션 가드

여러분 베하!

오늘은 Vue router의 네비게이션 가드라는 것을 알아볼게요.

 

네비게이션 가드란?

명칭에서 느껴지는 것처럼 Vue.js 애플리케이션에서 라우터 네비게이션을 제어하기 위한 기능입니다.

쉽게 말해 Vue Router를 통해 특정 URL에 접근할 때 해당 URL의 접근 또는 탐색을 막는(보호하는) 방법을 말합니다. 또한 리디렉션을 도와주는 역할도 합니다.

네비게이션 가드를 잘 사용하면 특정 조건에 따라 라우팅을 허용하거나 막을 수 있습니다.

 

가드의 인자

to : 이동할 라우트 객체의 정보(객체)

from : 이동하기 전 라우트 객체의 정보(객체)

next : 다음 단계로 진행하기 위한 함수. 트리거 되는 탐색 가드별 정확히 한 번만 next를 호출해야 합니다. 그렇지 않으면 영원히 훅이 해결되지 않거나 오류가 생깁니다.

• next  올바른 예

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

 

• next  올바르지 않은 예

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 사용자가 인증되지 않은 경우, `next`가 두 번 호출됨
  next()
})

 

• next  활용 예

next() : 다음 훅으로 이동됩니다. 다른 훅으로 이동할 수 있도록 승인을 하는 동작입니다.
next(false) : 현재 네비게이션을 종료합니다.
next('/') 또는 next({ path: '/' }) : 인자로 전달된 경로로 이동합니다. 현재의 네비게이션은 중단되고 새로운 네비게이션이 시작됩니다. next 함수에는 replace: true나 name: 'home', <router-link>의 to에 전달되어야 하는 prop나 router.push 함수에 전달되어야 하는 값들 모두 인자값으로 사용 가능합니다.
next(error) : (2.4.0 이후) next 함수에 전달된 값이 Error 인스턴스이면, 네비게이션이 중지되고, 에러는 router.onError()의 콜백에 전달됩니다.

 

 

가드의 종류

1. 전역 가드 (Global Guards): 애플리케이션 전역에서 라우터 네비게이션을 감시하는 가드입니다. beforeEach, beforeResolve, afterEach 세 가지 종류가 있습니다.

• beforeEach : 라우터에 들어가기 전에 실행되는 가드입니다.
• beforeResolve : 컴포넌트 가드가 끝난 후에 실행되는 가드입니다.
• afterEach : 라우트 이동이 해결된 후에 실행되는 가드입니다.

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

router.beforeEach((to, from, next) => {
  // 특정 조건을 검사하고 네비게이션을 허용 또는 거부
  if (/* 조건 충족 */) {
    next();
  } else {
    next('/login'); // 로그인 페이지로 리다이렉트
  }
});

 

 

 

2. 라우트 가드 (Per-Route Guards): 각 라우트에 대해 적용되는 가드로, 해당 라우트로의 네비게이션을 제어합니다.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 어드민 권한을 가진 경우에만 허용
        if (isAdmin) {
          next();
        } else {
          next('/'); // 홈으로 리다이렉트
        }
      },
    },
  ],
});

 

3. 컴포넌트 내 가드 (In-Component Guards): 라우트 컴포넌트 내에서 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 등의 가드를 정의하여 네비게이션을 제어할 수 있습니다.

• beforeRouteEnter : 네비게이션 이동이 확정된 후 컴포넌트가 만들어 지기 전에 실행되는 가드
• beforeRouteUpdate : 같은 컴포넌트 아래서 새로운 라우트가 불러졌을 때 실행되는 가드
• beforeRouteLeave : 라우트를 떠날 떄 실행되는 가드

export default {
  beforeRouteEnter(to, from, next) {
    // 특정 조건을 확인하고 네비게이션을 허용 또는 거부
    if (/* 조건 충족 */) {
      next();
    } else {
      next('/login'); // 로그인 페이지로 리다이렉트
    }
  },
};

 

 

가드의 동작 방식

1. 전역 가드: beforeEach는 모든 네비게이션 이전에 호출되며, 네비게이션을 허용하려면 next()를 호출해야 합니다. beforeResolve는 beforeEach와 유사하지만, 라우트 구성이 완료된 후에 호출됩니다. afterEach는 네비게이션이 완료된 후에 호출됩니다.
2. 라우트 가드: beforeEnter는 라우트에 진입하기 전에 호출되며, 네비게이션을 제어하기 위해 next()를 호출합니다.
3. 컴포넌트 내 가드: beforeRouteEnter는 컴포넌트가 렌더링되기 전에 호출되며, beforeRouteUpdate는 동일한 라우트에 있는 컴포넌트를 재사용할 때 호출됩니다. beforeRouteLeave는 라우트를 떠날 때 호출됩니다. 가드의 순서에 주의합시다.

 

가드의 장단점

장점

• 보안 강화: 특정 조건이나 권한이 충족되지 않으면 페이지로의 액세스를 허용하지 않아 보안을 강화할 수 있습니다.
• 네비게이션 제어: 사용자 경험을 더 효과적으로 관리하고 제어할 수 있습니다.

단점

• 복잡성 증가: 가드를 과도하게 사용하면 코드가 복잡해질 수 있으며, 가독성이 저하될 수 있습니다.
• 오용의 우려: 가드를 오용하면 필요한 네비게이션이 막히거나 사용자가 예상치 못한 동작을 경험할 수 있습니다.

 

Vue Router 가드는 라우팅을 제어하고 사용자 경험을 개선하는 강력한 도구입니다. 그러나 신중하게 사용해야 하며, 프로젝트의 규모와 복잡성에 따라 적절한 수준에서 사용하는 것이 좋습니다. 가드를 적용함으로써 더 안전하고 관리하기 쉬운 Vue.js 애플리케이션을 개발할 수 있을 것입니다.

 

그럼 즐거운 코딩하세요! 안녕~~~