라우트 Meta 필드

Watch a free video lesson on Vue School

때로는 transition 이름이나 라우트 접근 권한을 제어하기 위한 역할 같은 임의의 정보를 라우트에 붙이고 싶을 수 있습니다. 이는 속성 객체를 받으며 라우트 location과 내비게이션 가드에서 접근할 수 있는 meta 속성을 통해 구현할 수 있습니다. meta 속성은 다음과 같이 정의할 수 있습니다:

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 인증된 사용자만 게시물을 만들 수 있습니다
        meta: { requiresAuth: true },
      },
      {
        path: ':id',
        component: PostsDetail,
        // 누구나 게시물을 읽을 수 있습니다
        meta: { requiresAuth: false },
      },
    ],
  },
]

그렇다면 이 meta 필드에는 어떻게 접근할까요?

먼저 routes 구성의 각 라우트 객체를 라우트 레코드 라고 부릅니다. 라우트 레코드는 중첩될 수 있습니다. 따라서 라우트가 매치될 때는 여러 라우트 레코드에 동시에 매치될 수 있습니다.

예를 들어 위 라우트 구성에서는 URL /posts/new가 부모 라우트 레코드(path: '/posts')와 자식 라우트 레코드(path: 'new') 모두에 매치됩니다.

하나의 라우트에 매치된 모든 라우트 레코드는 route 객체(및 내비게이션 가드 안의 라우트 객체)에서 route.matched 배열로 노출됩니다. 이 배열을 순회하며 모든 meta 필드를 확인할 수도 있지만, Vue Router는 부모에서 자식까지의 모든 meta 필드를 비재귀적으로 병합한 route.meta도 제공합니다. 즉 다음처럼 간단히 작성할 수 있습니다:

router.beforeEach((to, from) => {
  // 각 라우트 레코드를 확인해야 하는 대신
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // 이 라우트는 인증이 필요하므로 로그인 여부를 확인합니다
    // 아니라면 로그인 페이지로 리다이렉트합니다.
    return {
      path: '/login',
      // 나중에 돌아올 수 있도록 현재 location을 저장합니다
      query: { redirect: to.fullPath },
    }
  }
})

TypeScript

vue-router의 RouteMeta 인터페이스를 확장하여 meta 필드에 타입을 지정할 수 있습니다:

// 이것은 `router.ts` 같은 어떤 `.ts` 파일에든 직접 추가할 수 있습니다
// `.d.ts` 파일에 추가할 수도 있습니다. 프로젝트의 tsconfig.json
// "files"에 포함되어 있는지 확인하세요
import 'vue-router'

// 모듈로 처리되도록 하려면 `export` 문을 하나 이상 추가하세요
export {}

declare module 'vue-router' {
  interface RouteMeta {
    // 선택 사항입니다
    isAdmin?: boolean
    // 모든 라우트에서 선언해야 합니다
    requiresAuth: boolean
  }
}