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>
&nbsp;&nbsp;&nbsp;
<router-link to="/second">second screen</router-link>
&nbsp;&nbsp;&nbsp;
<router-link to="/second?error">second screen(error)</router-link>

결과

PreviousGuardNextVuex

Last updated