Vue 네비게이션 가드 (navigation guard)

Vue 네비게이션 가드 (navigation guard)

- 페이지 이동을 다른 페이지로 리다이렉션하거나 취소하여 특정 페이지 진입을 보호하는데 사용한다.

- Vue Router에서 제공한다.

- 연결 방법은 전역, 라우트, 컴포넌트 내부가 있다.

 

 

🛡️전역 가드

(1) global before guard

const router = createRouter({ ... })

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

- router.beforeEach를 통해 전역 가드 등록

- 네비게이션이 트리거될 때마다 작성 순서에 따라 호출되기 전의 모든 경우에 발생한다.

- 가드는 비동기식으로 실행될 수 있다.

- 네비게이션은 모든 훅이 해결되기 전까지는 보류 중으로 간주된다.

 

(2) global resolve guard

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 오류를 처리한 다음 탐색을 취소합니다.
        return false
      } else {
        // 예기치 않은 오류, 탐색을 취소하고 오류를 전역 처리기에 전달
        throw error
      }
    }
  }
})

- rotuer.beforeResolve를 통해 글로벌 가드 등록

- router.beforeEach와 유사하다.

- 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다.

- 데이터를 가져오거나 사용자가 페이지에 들어갈 수 없는 경우를 피하고 싶은 작업을 할 때 유용하다.

 

(3) global after hooks

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

- 전역 훅을 등록할 수 있다.

- 네비게이션에 영향을 줄 수 없다.

 

 

🛡️라우트 가드

// 함수로 전달
function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

// 라우트 가드 설정
const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams],
  },
]

- beforeEnter가드를 라우트 설정 객체에 직접 정의

- 해당 라우트에 진입할때만 트리거된다.

- 같은 url이지만 params, query, hash가 변경될 때는 트리거 되지 않는다.

- 오직 현재랑 다른 라우트로 이동할 때만 트리거된다.

- 또한 함수의 배열을 전달하여 다른 라우트에 설정한 가드를 재사용할 때 유용

 

 

🛡️컴포넌트 내부 가드

- 컴포넌트 내부에 라우트 네비게이션 가드를 직접 정의

 

Options API 에서 컴포넌트 내 가드

(1) beforeRouteEnter

beforeRouteEnter(to, from) {
    // ...
}

- 네비게이션 이동이 확정된 후 컴포넌트가 만들어지기 전에 실행되는 가드

- this 인스턴스 사용 불가 (아직 생성되지 않아서!)

 

(2) beofreRouteUpdate

beforeRouteUpdate(to, from) {
    // ...
}

- 해당 컴포넌트를 렌더링하는 경로가 변경되면 호출된다.

- 예를들면 /user/:id 중 id가 변경 될 때

- this 인스턴스 사용 가능

 

(3) beforeRouteLeave

beforeRouteLeave(to, from) {
    // ...
}

- 해당 라우트를 떠날 때 실행되는 가드

- 일반적으로 사용자가 저장하지 않은 편집으로 경로를 이탈하는 걸 방지하는데 사용된다.

- this 인스턴스 사용 가능

 

 

Composition API 에서 컴포넌트 내 가드

(1) onBeforeRouteUpdate

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      // ...
    })
  },
}

 

(2) onBeforeRouteLeave

export default {
  setup() {
    onBeforeRouteUpdate(async (to, from) => {
      // ...
    })
  },
}

 

Options API 에서의 beforeRouteUpdate, beforeRouteLeave가 Composition API에서는 onBeforeRouteUpdate, onBeforeRouteLeave로 사용되는 것!

 

---

 

네비게이션 가드는 예전에도 정리한 적이 있는데 까먹어서 복습겸 다시 정리해봤다 ...ㅠ