[Vue] 네비게이션 가드, url 접근 막기, router 설정

ctrl c ctrl v from https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/

기억하기 위한 글

 

 

* 네비게이션 가드
> 뷰 라우터로 특정 url 에 접근할 떄 해당 url 에 접근을 막는 방법 

 

* 네이게이션 가드 종류
1. 전역가드 : 어플리케이션 전역에서 동작

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


// from 에서 to url 로 이동하기 위해서는 next() 를 호출해줘야만한다. 호출하지 않으면 모든 라우팅이 대기상태가 됨.

 

 

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