beforeEach
전역 beforeEach 가드
전역 beforeEach 가드는 다음과 같이 생성된 라우터 인스턴스에 설정한다.
const router = createRouter({...});
router.beforeEach((to, from, next)=>{
});
export default router;
beforeEach 가드의 매개변수 정보는 다음과 같다.
to - 목적 위치 정보
from - 출발 위치 정보
next - 다음 단계에 전달할 값이 있을 경우 선택적으로 사용. 옵션이며 사용할 경우 한번만 호출하도록 구성
beforeEach 가드는 다음 값을 반환할 수 있다.
true
- 가드를 통과하여 다음 단계로 진행할 수 있도록 승인false
- 가드를 통과하지 못하도록 차단
적용 테스트
다음과 같이 로그를 출력하도록 만들고 적용 결과를 확인한다.
router.beforeEach((to,from)=>{
console.log(to, from);
return true;
});

전역 beforeEach 가드 적용 사례
목적지 객체(to) 등을 조사하여 특정 meta 정보 또는 param 정보가 존재하지 않을 경우 차단하도록 구현할 수 있다. 다음 코드는 목적지 주소에 error라는 이름의 query가 존재할 경우 차단하는 코드이다.
router.beforeEach((to)=>{
//error라는 이름의 쿼리가 있을 경우 값의 유무와 관계없이 차단
if('error' in to.query) return false;
return true;
});
App.vue의 router-link를 다음과 같이 수정한다.
<router-link to="/">first screen</router-link>
<router-link to="/second">second screen</router-link>
<router-link to="/second?error">second screen(error)</router-link>
결과

Last updated