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

1. 네비게이션 가드란? 

뷰 라우터로 특정 URL에 접근할 때 해당 URL에 접근을 막는 방법을 말한다. 예를 들어 로그인 인증정보 없을 때 로그인 페이지로 돌아가게 하는 것

 

2. 네비게이션 가드의 종류 (전역가드, 라우터가드, 컴포넌트 가드)

1) 애플리케이션 전역에서 동작하는 전역 가드

var router = new VueRouter();

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

router.beforeEach()를 호출하고 나면 모든 라우팅이 대기상태가  된다. 원래 url이 변하면 해당 url에 따른 화면으로 자연스럽게 전환되어야 하는데 전역가드를 설정했기 때문에 화면이 전환되지 않는다. 화면을 전환하기 위해서는 next()가 호출되어야 한다. 

ex) 로그인 안했을 때  meta로 확인 후 이동시키는 경우

 

2) 특정 URL에서만 동작하는 라우터 가드( 전체 라우팅이 아니라 특정 라우팅에 대해 가드를 설정하는 것)

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

 

3) 라우터 컴포넌트 안에 정의하는 컴포넌트 가드 ( 라우터로 지정된 특정 컴포넌트에 가드를 설정하는 것)

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 컴포넌트를 접근할 수 있음
  }
}

https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/

(중급) Vue.js 라우터 네비게이션 가드 알아보기