라우터 네비게이션 가드

데이터 호출 시점

1. 라우터 네비게이션 가드

   • 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)

2. 컴포넌트 라이프 사이클 훅

   • created : (컴포넌트가 생성)되자마자 호출되는 로직

라우터 네비게이션 가드

사용자의 권한에 따라 페이지 접근을 막거나 페이지를 로딩하기 전에 데이터를 미리 불러올 때 사용하기 좋은 기술

네비게이션 가드 종류

• 전역 가드 boeforEach()
• 지역 가드 beforeEnter()
• 컴포넌트 가드
  - beforeRouteEnter(): 컴포넌트가 화면에 표시되기 전 (컴포넌트 접근 X)
  - beforeRouteUpdate(): 화면에 표시된 컴포넌트가 변경될 때 (this로 컴포넌트 접근가능)
  - beforeRouteLeave(): 컴포넌트에 화면이 표시한 url 값이 변경되기 직전(this로 컴포넌트 접근가능)
  

네비게이션 가드 함수의 파라미터

• to: 이동할 url 라우터 정보
• from: 현재 URL의 라우팅 정보
• next: function(), next를 호출해야만 이동할 페이지로 이동함

// 지역가드 ex)
beforeEnter: (to, from, next) => {
  if(to.auth) { // 인증정보가 있는지 
    next();
  } else {
    router.replace('/login');
  }
}