[Vue.js] router의 meta

 

먼저, 네비게이션 가드에 대한 지식이 선행되어야 한다.

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

 

 

---

 

 

◽ meta

라우터에서 네비게이션 가드를 통해 라우터 이동 시 권한이나 정해진 상태값에 따라 이동에 제약을 걸 수 있다.

 

예를 들어, 유저가 로그인이 꼭 필요한 페이지에 접근할 때 비로그인 상태라면 로그인 페이지로 redirect 시켜야하고, 로그인이 되어있는 상태일 경우 그대로 이동시키면 된다. 이처럼 '로그인 여부'를 필수로 알아야하는 라우터에서는 이동 전에 meta를 설정하여 해당 값을 검사하는 로직을 추가하고, 지정된 라우터로 이동시킬 것인지 redirect 시킬 것인지의 로직을 만들 수 있다.

 

 

◽ 사용하기

📄 router/index.js - 라우터에 메타 설정

{
   path: '/',
   component: 'main',
   // 메타 필드
   meta: { isLogined: true }
}

 

📄 router/index.js - 라우터 이동 시 메타 검사

router를 설정할 때 각각의 라우터 객체를 '라우트 레코드'라고 하고, 라우트와 일치하는 모든 라우트 레코드는 $route.matched라는 배열에 저장된다. 

router.beforeEach((to, from, next) => {
	// $route.matched 배열에 저장된 라우터 중 meta 필드에 'isLogined'가 있는지 찾는다.
	if(to.matched.some(record => record.meta.isLogined)) {
    	// 로그인 되어있지 않은 유저라면 로그인 페이지로 redirect 시킨다.
    	if(!auth.islogined) {
        	next({
            	path: '/login',
            })
        // 로그인 되어 있다면 그대로 라우터 이동을 진행한다.
        } else {
        	next()
        }
    } else {
    	next()
    }
})

 

 

출처

https://router.vuejs.org/kr/guide/advanced/meta.html

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.