[vue] 경로(Route) 메타 필드

라우트에 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()
    }
})

아래는 또 다른 예시이다.

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 권한이 있는 사용자만 Post를 만들수 있음
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 아무나 읽을수 있음
        meta: { requiresAuth: false }
      }
    ]
  }
]

router.beforeEach((to, from) => {
  // 경로가 접근 권한을 필요로 하는지 모든 매칭된 경로를 뒤지지 않고
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // 이 경로는 접근 권한을 필요로 하기 때문에 로그인 여부를 체크함
    // 권한이 없다면 로그인 페이지로 리다이렉트
    return {
      path: '/login',
      // 어느 페이지에서 왔는지 저장해둠
      query: { redirect: to.fullPath },
    }
  }
})

---

이번에 404 페이지와 그리고 또 다른 조건에서의 라우터 이동을 개발하며 메타필드에 관해 좀 더 공부가 필요하다는 생각이 들었다.
선행으로 네비게이션 가드에 대한 지식이 좀 더 뒷받침이 되어야할 듯 하다.
라우터에 대해서도 구체적인 공부가 많이 필요한 것 같다.