네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다.
예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술이다.
1) 전역가드: 어플리케이션 전역에서 동작한다.
- from: 현재 URL 정보가 담긴 라우터 객체
- to: 이동할 URL 정보가 담긴 라우터 객체
- next: to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수
(next()가 호출되기 전까지 화면이 전환되지 않는다.)
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>