[Vue.js] 네비게이션가드 란??

 

네비게이션 가드 란??

• 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다.
• 이름에서도 알 수 있듯 vue - router 가 제공하는 네비게이션 가드는 주로 리다이렉션 하거나 취소하여 네비게이션을 보호하는데 사용됨

네비게이션 가드의 종류??

1. 애플리케이션 전역에서 동작하는 전역가드
2. 특정 URL 에서만 동작하는 라우터 가드
3. 라우터 컴포넌트 안에 정의하는 컴포넌트 가드

전역가드

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

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

router.beforeEach(async (to, from, next) => {
  if (to.name === 'login' || to.name === 'signup') {
    next()
    return
  }
  if (to.name === 'AdminAtd') {
    if (sessionStorage.getItem('userName') !== '"관리자"') {
      alert('관리자만 들어갈 수 있는 페이지 입니다.')
      next(from)
    } else {
      next()
    }
  }
  if (sessionStorage.getItem('userId')) {
    next()
  } else {
    next({ name: 'login' })
  }
})

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

 

라우트 별 가드

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

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

 

컴포넌트 가드

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

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

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

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

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

---

전체 네비게이션 시나리오

1. 네비게이션이 트리거됨.
2. 비활성화될 컴포넌트에서 가드를 호출.
3. 전역 beforeEach 가드 호출.
4. 재사용되는 컴포넌트에서 beforeRouteUpdate 가드 호출. (2.2 이상)
5. 라우트 설정에서 beforeEnter 호출.
6. 비동기 라우트 컴포넌트 해결.
7. 활성화된 컴포넌트에서 beforeRouteEnter 호출.
8. 전역 beforeResolve 가드 호출. (2.5이상)
9. 네비게이션 완료.
10. 전역 afterEach 훅 호출.
11. DOM 갱신 트리거 됨.
12. 인스턴스화 된 인스턴스들의 beforeRouteEnter가드에서 next에 전달 된 콜백을 호출합니다.

 

---

참고문헌

네비게이션 가드 | Vue Router