Vue 공부 - 네비게이션 가드

네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용됩니다.

전역 가드

router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있습니다.

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

router.beforeEach((to, from, next) => {
  // ...
})

네비게이션이 트리거될 때마다 가드가 작성 순서에 따라 호출되기 전의 모든 경우에 발생합니다. 가드는 비동기식으로 실행될 수 있으며 네비게이션은 모든 훅이 해결되기 전까지 보류 중으로 간주됩니다.
모든 가드 기능은 세 가지 전달인자를 받습니다.

• to: 라우트: 대상 Route 객체로 이동합니다.
• from: 라우트: 현재 라우트로 오기전 라우트입니다.
• next: 함수: 이 함수는 훅을 해결하기 위해 호출 되어야 합니다. 액션은 next에 제공된 전달인자에 달려 있습니다.
  • next(): 파이프라인의 다음 훅으로 이동하십시오. 훅이 없는 경우 네비게이션은 승인됩니다.
  • next(false): 현재 네비게이션을 중단합니다. 브라우저 URL이 변경되면(사용자 또는 뒤로 버튼을 통해 수동으로 변경됨) from경로의 URL로 재설정됩니다.
  • next('/') 또는 next({ path: '/' }): 다른 위치로 리디렉션합니다. 현재 네비게이션이 중단되고 새 네비게이션이 시작됩니다.
  • next(error): next에 전달된 인자가 Error의 인스턴스이면 탐색이 중단되고 router.onError()를 이용해 등록된 콜백에 에러가 전달됩니다.

항상 next함수를 호출하십시오. 그렇지 않으면 훅이 절대 불러지지 않습니다.

라우트 별 가드

beforeEnter 가드를 라우트의 설정 객체에 직접 정의할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

컴포넌트 내부 가드

마지막으로 beforeRouteEnter와 beforeRouteLeave를 사용하여 라우트 컴포넌트(라우터 설정으로 전달되는 컴포넌트) 안에 라우트 네비게이션 가드를 직접 정의할 수 있습니다.

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

const Foo = {
  template: '...',
  beforeRouteEnter (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트 앞에 호출됩니다.
    // 이 가드가 호출 될 때 아직 생성되지 않았기 때문에
    // 'this' 컴포넌트 인스턴스에 접근 할 수 없습니다!
  },
  beforeRouteLeave (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트가 이전으로 네비게이션 될 때 호출됩니다.
    // 'this' 컴포넌트 인스턴스에 접근할 수 있습니다.
  }
}

beforeRouteEnter 가드는 네비게이션이 확인되기 전에 가드가 호출되어서 새로운 엔트리 컴포넌트가 아직 생성되지 않았기 때문에 this에 접근하지 못합니다.
그러나 콜백을 next에 전달하여 인스턴스에 엑세스 할 수 있습니다. 네비게이션이 확인되고 컴포넌트 인스턴스가 콜백에 전달인자로 전달 될 때 콜백이 호출됩니다.

beforeRoutEnter (to, from, next) {
  next(vm => {
  // 'vm'을 통한 컴포넌트 인스턴스 접근
  })
}

beforeRouteLeave 안에서 this에 직접 접근 할 수 있습니다. leave 가드는 일반적으로 사용자가 저장하지 않은 편집 내용을 두고 실수로 라우트를 떠나는 것을 방지하는데 사용됩니다. 탐색은 next(false)를 호출하여 취소할 수 있습니다.