네비게이션 가드
: 특정 URL에 접근할때 접근하지 못하도록 막는 방법
예) 사용자 인증정보(로그인)이 없을 경우 특정페이지에 접근하지 못하도록 막는다.
: 특정 URL을 접근하지 못하도록 제어한다.
네비게이션 가드 종류
* 전역가드
: 어플리케이션 전역에서 동작하는 전역가드
* 라우터가드
: 특정 URL에서만 동작하는 라우터가드
* 컴포넌트 가드
: 라우터 컴포넌트 가드에 정의하는 컴포넌트 가드
전역가드
const router = new VueRouter({
})
//라우터 변수 아래에 추가
router.beforeEach(function(to, from, next){
//to = 이동할 URL 정보가 담긴 라우터 객체
//from = 현재 URL 정보가 담긴 라우터 객체
//next = to에서 지정한 URL로 이동학 위해 반드시 호출해야할 함수
})
router.beforeEach() 를 호출하고 나면 모든 라우팅이 대기 상태가 된다.
전역가드를 설정하기 전에는 라우터에 의해 자연스럽게 URL이 변경되어 다른 페이지로 가야하지만
전역가드를 설정했기 때문에 대기 상태가 된다. 요청한 url로 라우팅 되기 위해선 next()를 호출해줘야 한다.
보통은 전역가드를 사용해 로그인 페이지를 구현한다.
예)
var Home = { template: '<h1> Home Component </h1>' };
var House = { template: '<h1> House Component </h1>' };
var router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/house',
component: House
}
]
})
router.beforeEach(function(to, from, next){
console.log('전역가드 router 실행');
})
라우터가드
const router = new VueRouter({
routes: [
{
path: '/obo',
component: () => '@/컴포넌트 경로',
beforeEnter: function(to, from, next){
}
}
]
})
컴포넌트가드
const Home = {
template: '<h1>Home Component</h1>',
beforeRouterEnter (to, from, next) {
//Home 컴포넌트가 화면에 표시되기 전에 수행
},
beforeRouterUpdate (to, from, next) {
//Home 컴포넌트가 화면에 표시되고 난 후 변경될때 수행
},
beforeRouterLeave (to, from, next) {
// Home 컴포넌트를 화면에 표시한 URL 값이 변경되기 직전에 수행
}
}