Vue.js 라우터 네비게이션 가드

네비게이션 가드란?

네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 해 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다.

종류

• 애플리케이션 전역에서 동작하는 전역 가드
• 특정 URL에서만 동작하는 라우터 가드
• 라우터 컴포넌트 안에 정의하는 컴포넌트 가드

전역 가드

전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있습니다.

먼저, 전역 가드 설정을 위해 라우터 인스턴스를 생성합니다.

var router = new VueRouter();

다음으로 beforeEach() API를 호출합니다.

router.beforeEach(function (to, from, next) {
  // to : 이동할 url
  // from : 현재 url
  // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수
});

• to : 이동할 url 정보가 담긴 라우터 객체
• from : 현재 url 정보가 담긴 라우터 객체
• next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수

beforeEach가 호출되면 해당 url로 바로 이동하지않고 대기 상태가 됩니다. 해당 url로 라우팅 하기 위해서는 next()를 꼭 호출해줘야 합니다. 그 전까지는 화면이 전환되지 않습니다.

라우터 가드

전체 라우팅이 아니라 특정 라우팅에 대해서 가드를 설정하는 방법입니다. 원리는 똑같지만 호출하는 API가 beforeEnter로 다르고 특정 라우팅에 대해서만 설정해주면 됩니다.

var router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: function(to, from, next) {
        // 인증 값 검증 로직 추가
      }
    }
  ]
})

컴포넌트 가드

라우터로 지정된 특정 컴포넌트에 가드를 설정하는 방법은 다음과 같습니다.

const Login = {
  template: '<p>Login Component</p>',
  beforeRouteEnter (to, from, next) {
    // Login 컴포넌트가 화면에 표시되기 전에 수행될 로직
    // Login 컴포넌트는 아직 생성되지 않은 시점
  },
  beforeRouteUpdate (to, from, next) {
    // 화면에 표시된 컴포넌트가 변경될 때 수행될 로직
    // `this`로 Login 컴포넌트를 접근할 수 있음
  },
  beforeRouteLeave (to, from, next) {
    // Login 컴포넌트를 화면에 표시한 url 값이 변경되기 직전의 로직
    // `this`로 Login 컴포넌트를 접근할 수 있음
  }
}