Vue.js 네비게이션 가드 관련 이슈

Vue.js 개발 할 때 보안점검을 위해 권한 체크 부분이 있었는데, 여기서 발생했던 이슈를 공유한다.

 

현상은?

아래와 같이 라우터가 구성되어 있고

화면 이동 시 beforeEach 에서 intercept 하여 권한 체크 및 토큰 유효성을 체크 하도록 하는데...

const router = new Router( {
    routes : [
    	{
        	path: '/', redirect: '/home'
        },
        {
        	path: '/pjt', component: ScreenWithLNB, 
            children: [
              {
                  path: '/app/:appId', component: Project
              },            	
            ]
        },
        ...
    ]
}
router.beforeEach((to, from, next) => {
    // token check
}

URL path를 직접 쳐서 테스트를 해보는데 안먹는거다!!

 

원인이 뭔지 봤더니..

현재 화면의 구성과 이 때 Path는 아래와 같이 매핑된다.

Project.vue에서는 LNB에서 있는 메뉴를 클릭함에 따라 ID만 바뀌면서 데이터를 갱신하는 형태이다.

여기서 네비게이션 가드의 문제는

렌더링 할 때인데, 실제 여기서는 렌더링이 되는게 아니라 데이터만 변경되는 구조.

 

아래 설명에는 이렇게 나와있다.

Remember that params or query changes won't trigger enter/leave navigation guards. You can either watch the $route object to react to those changes, or use the beforeRouteUpdate in-component guard.

요약하자면 변경되는 path가 params라서 네비게이션 가드를 트리거하지 않았다라는 것이다.

그래서 beforeEach 함수를 타지 않고 token 체크하는 로직을 타지 않았다.

 

 

결론은

결국 Project.vue 에 beforeRouteUpdate 훅을 걸어주어 param만 변경되는 경우도 체크해주도록 변경했다.

export default {
    name: 'Project',
    props: {},
    data() {},
    ...
    beforeRouteUpdate(to, from next) {
    	// 여기서 token check
    }
}

 

 

※ 참조

router.vuejs.org/kr/guide/advanced/navigation-guards.html