router 네비게이션 가드(Navigation Guards)

Vue Router에서 네비게이션 가드(Navigation Guards)는 사용자가 페이지(라우트) 간 이동할 때 특정 조건을 확인하거나 동작을 수행할 수 있는 메커니즘입니다. 주로 인증과 권한 제어를 위해 사용됩니다.

 

1. 네비게이션 가드의 종류

1-1. 전역 가드 (Global Guards)

전역적으로 모든 라우트 변경에 대해 작동합니다.

• beforeEach
  • 라우팅이 시작되기 전에 실행됩니다.
  • 주로 인증 또는 권한 확인에 사용됩니다.

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 인증이 필요하지만 인증되지 않았으면 로그인 페이지로 이동
  } else {
    next(); // 다음 경로로 이동
  }
});

 

• beforeResolve
  • 모든 컴포넌트의 가드와 비동기 훅이 처리된 후 호출됩니다.
  • 주로 라우트가 완전히 해결되기 전에 마지막으로 실행됩니다.

router.beforeResolve((to, from, next) => {
  console.log('Before resolve');
  next();
});

 

• afterEach
  • 라우팅이 완료된 후 실행됩니다.
  • 라우팅 후 이벤트 로깅이나 UI 갱신 등의 작업에 사용됩니다.

router.afterEach((to, from) => {
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

 

 

3-2. 라우트 가드 (Per-Route Guards)

특정 라우트에만 적용되는 가드입니다.

• beforeEnter
  • 라우트 정의에서 설정되며, 해당 라우트로 들어가기 전에 실행됩니다.
  • 주로 특정 경로에 대한 접근 제한에 사용됩니다.

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

 

3-3. 컴포넌트 가드 (In-Component Guards)

라우트가 특정 컴포넌트에 진입하거나 떠날 때 컴포넌트 내부에서 실행됩니다.

• beforeRouteEnter
  • 컴포넌트가 활성화되기 전에 호출됩니다.
  • this가 정의되지 않으므로 컴포넌트 인스턴스에 접근하려면 next 콜백을 사용해야 합니다.

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // vm은 컴포넌트 인스턴스를 가리킴
      console.log('Component loaded:', vm);
    });
  }
};

 

• beforeRouteUpdate
  • 현재 활성화된 컴포넌트가 동일한 경로 내에서 다시 렌더링될 때 호출됩니다.

export default {
  beforeRouteUpdate(to, from, next) {
    console.log('Route updated');
    next();
  }
};

 

• beforeRouteLeave
  • 컴포넌트를 떠나기 전에 호출됩니다.
  • 주로 저장되지 않은 데이터를 경고하거나 특정 동작을 막을 때 사용됩니다.

export default {
  beforeRouteLeave(to, from, next) {
    if (!this.savedChanges) {
      const answer = window.confirm('변경사항을 저장하지 않았습니다. 떠나시겠습니까?');
      if (!answer) return;
    }
    next();
  }
};

 

*종류별 비교

종류	실행 시점	사용 위치
전역 가드	모든 라우트 변경 시	router 인스턴스
라우트 가드	특정 라우트로 이동 시	라우트 정의 (routes)
컴포넌트 가드	특정 컴포넌트 렌더링 시	컴포넌트 내부

 

2. 사용 예시

*사용 사례 예시

• 로그인 상태 확인: 로그인 여부에 따라 페이지 접근 허용/차단.
• 사용자 권한 확인: 관리자 페이지나 특정 사용자만 접근 가능한 페이지 제한.
• 비동기 데이터 로드: 라우트 이동 전에 필요한 데이터를 미리 가져오기.
• 페이지 이동 시 정리 작업: 현재 페이지에서 할당된 자원을 해제하거나 초기화.

2-1. 인증(Authentication)

예시: 인증 여부 확인

// Vue Router 설정
const router = new VueRouter({
  routes: [
    { path: '/login', component: LoginPage },
    { 
      path: '/dashboard', 
      component: DashboardPage,
      meta: { requiresAuth: true } // 인증이 필요한 라우트
    }
  ]
});

// 전역 네비게이션 가드
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('authToken'); // 로그인 여부 확인
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isLoggedIn) {
      next('/login'); // 인증되지 않았으면 로그인 페이지로 이동
    } else {
      next(); // 인증되었으면 이동 허용
    }
  } else {
    next(); // 인증이 필요 없는 페이지는 그냥 이동
  }
});

 

2-2. 권한 제어(Authorization)

예시: 권한 확인

router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('userRole'); // 사용자 역할 ('admin', 'user' 등)
  if (to.meta.requiredRole && to.meta.requiredRole !== userRole) {
    alert('권한이 없습니다!');
    next('/forbidden'); // 권한이 없으면 접근 금지 페이지로 이동
  } else {
    next(); // 권한이 있으면 이동 허용
  }
});