[vue.js] vue-router의 네비게이션 가드

vue-router의 네비게이션 가드

◽ 네비게이션 가드(navigation-guard)

네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다.

 

 

◽ 종류

1) 전역가드: 어플리케이션 전역에서 동작한다.

• to: 이동할 URL 정보가 담긴 라우터 객체
• from: 현재 URL 정보가 담긴 라우터 객체
• next: to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수

const router = new VueRouter();

// beforeEach()를 호출하고나면 모든 라우팅이 대기상태가 된다.
// URL로 라우팅하기위해서는 next()를 호출해야한다.
router.beforeEach(function( to, from, next ) {
	// 'isPassed'는 내가 정의한 속성값으로 로그인을 한 경우 isPassed = true
    // 로그인이 된 유저일 때
    if(isPassed) {
    	next(); // 다음 라우터로 이동을 허용한다.
    // 로그인이 되지 않았을 때
    } else {
    	console.log('로그인 후 이용하실 수 있습니다.');
    }
})

 

2) 라우터 가드:  특정 URL에서만 동작한다.

export const router = new VueRouter({
	routes : [
    	{
        	path: '/home',
            component: Home,
            beforeEnter: function(to, from, next) {
            	// 인증을 위한 로직 작성
            }
        },
    ]
})

 

3) 컴포넌트 가드:  라우터 컴포넌트 안에 정의한다.

<script>
export default {
	beforeRouterEnter(to, from, next) {
		// 컴포넌트가 화면에 표시되기 전 수행될 로직
	},
	beforeRouterUpdate(to, from, next) {
		// 컴포넌트가 화면에 표시된 후 수행될 로직
	},
	beforeRouterLeave(to, from, next) {
		// URL값이 변경되기 직전에 수행될 로직
	},
}
</script>