Navigation Guards(탐색 가드)

이름에서 알 수 있듯이 Vue 라우터가 제공하는 탐색 가드는 주로 리디렉션이나 취소로부터 탐색을 보호하는데 사용됩니다. 경로 탐색 프로세스에 연결하는 방법에는 전역, 경로별 또는 component 내 등 여러가지가 있습니다.

 

Global Before Guard

'router.beforeEach'를 사용하여 가드하기 전에 전역에 등록할 수 있습니다.

const router = createRouter({...});

router.beforeEach((to, from) => {
	//	탐색을 취소하려면 명시적으로 false를 반환합니다.
    return false
})

Navigation이 트리거될 때마다 작성 순서대로 가드를 호출하기 전에 전역으로 이동합니다.

가드는 비동기식으로 해결될 수 있으며 모든 후크가 해결되기 전에 탐색이 보류중인 것으로 간주합니다.

 

모든 가드 함수는 두개의 인수를 받습니다

• to: 정규화된 형식의 대상 경로 위치로 이동합니다.
• from: 이동중인 정규화된 형식의 현재 경로 위치입니다.

그리고 선택적으로 다음 값을 반환할 수 있습니다.

• false: 현재 탐색을 취소합니다. 브라우저 URL이 사용자에 의해 수동으로 또는 뒤로 버튼을 통해 변경된 경우, 해당 URL은 from 경로의 URL로 재설정됩니다.
• route location: router.push()를 호출하는 것처럼 경로 위치를 전달하여 다른 위치로 리디렉션. replace: true 또는 name: 'home'과 같은 옵션을 전달할 수 있습니다. 현재 탐색을 삭제하고 동일한 탬색 위치에서 새 탐색이 생성됩니다.

router.beforeEach(async (to, from) => {
	if (
    	// user가 인증되었는지 확인합니다.
        !isAuthenticated &&
        // 무한 리디렉션을 피합니다.
        to.name !== 'Login'
    ) {
    	// user에서 login으로 리디렉션
        return { name: 'Login' }
    }
})

또한 예상치 못한 상황을 만났을 경우 Erorr를 발생시킬 수 있습니다. 이것은 탐색을 취소하고 router.onError()를 통해 등록된 콜백을 호출합니다.

아무것도 반환되지 않거나 undefined 또는 true를 리턴하는 경우 navigation이 유효성을 검사하고 다음 navigation 가드가 호출됩니다.

위의 모든 것은 비동기 함수 및 Promise와 동일한 방식으로 작동합니다.

router.beforeEach(async (to, from) => {
	// canUserAccess() returns 'true' or 'false'
    const canAccess = await canUserAccess(to)
    if (!canAccess) return '/login'
})

 

Optional 세번째 인자 next

Vue router 이전버전에서도 세번째 인자인 next는 사용가능했다. 이 인수는 일반적인 오류 원인이었고 RFC를 통해 제거되었습니다.하지만 여전히 지원되므로 세번째 인수를 모든 네비게이션 가드에서 전달할 수 있습니다. 이 경우 네비게이션 가드를 통해 주어진 패스에 정확히 한 번 다음에 전 논리적 경로가 겹치지 않는 경우에만 두번 이상