[Udemy Vue 완벽가이드 Section13] 188. 라우트 메타데이터 활용하기

내비게이션 가드와 함께 사용하면 특히 유용한 기능이 있다.

→ 바로 '라우트 메타 필드'

어떤 라우트에도 라우트 구성에 메타(meta) 프로퍼티를 추가할 수 있다.

 

meta에는 객체 또는 그 외 다양한 값을 넣을 수 있다.

예를 들어 needsAuth를 추가하고 true로 설정할 수 있다. 이 부분은 원하는 대로 해라.

//main.js
{
  name: 'teams',
  path: '/teams',
  meta: { needsAuth: true },
  components: { default: TeamsList, footer: TeamsFooter },
  // 생략
},

 

meta 프로퍼티가 유용한 건 바로 라우트 객체나 $route 객체가 있는 곳 모두에서 메타필드에 액세스할 수 있다.

컴포넌트 내부에서도 사용할 수 있고 라우트에 로드된 컴포넌트에 데이터를 전달할 수도 있고,

내비게이션 가드는 to와 from 객체에 액세스할 수 있기 때문에 내비게이션 가드에도 사용할 수 있다.

meta 프로퍼티를 추가해서 이 라우트에 인증이 필요하다고 표시할 수 있고

전역 beforeEach라우트에 가서 유저가 가려는 라우트의 메타 필드 needsAuth가 참(truthy)인지 if검사를 할 수 있다.

그러면 사용자의 인증 여부를 확인할 수 있다.

여기 코드를 사용해서 사용자의 인증 여부를 확인하고 인증된 경우에는 확인을 하고, 그렇지 않은 경우 거부하면 된다.

router.beforeEach(function (to, from, next) {
  if (to.meta.needsAuth) {
    console.log('Needs auth!');
      next();
  }
});

 

이렇게 하면 모든 라우트에 실행되는 전역 내비게이션 가드를 사용하면서도 개별 라우트에 첨부된 메타 데이터를 기반으로 다른 동작을 실행할 수 있다.

라우트에 첨부된 메타 데이터를 기반으로 다른 작업을 하게 해주므로 세련되게 전역 내비게이션 가드를 사용하는 방법이라고 할 수 있다.

 

항상 필요한 건 아니고 어려운 심화 개념이지만 특정 라우트가 일치할 때 컴포넌트 내 라우트 객체에 추가 데이터를 전달할 수 있다는 점이 유용하게 쓰일 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.