navigation guard

• 내비게이션 가드는 인증과 같은 기능을 추가할 때 유용하게 쓰인다.
  인증하지 않은 사용자가 특정 라우트에 액세스할 수 없도록 방지하는 경우를 예로 들 수 있다.

• 하지만 일부 코드를 실행하고 싶을 때 페이지 변화를 감지하기에도 유용하며

• 사용자가 양식을 수정한 걸 저장하지 않은 상태에서 실수로 페이지를 나가지 않도록 방지하는 데에도 도움이 된다.

guard란?

• 페이지가 바뀔 때 Vue 라우터로 호출하는 함수와 메서드에 대해 말하는 것인데 정확히는 내비게이션 동작이 시작될 때 호출하는 함수와 메서드이다.

beforeEach(){}

const router = CreateRouter({
	...
})

router.beforeEach(function(to, from, next) {
  next();
});

• 예를들어 위 코드를 봐보자 main.js 파일에 생성한 라우터인 이 메인 라우터에서 Vue 앱으로 router를 전달하기 전에 이렇게 router.beforeEach를 호출할 수 있다.

• beforeEach는 내장된 메서드이며 함수를 인수로서 취한다
  이 함수는 Vue 라우터가 우리가 한 페이지에서 다른 페이지로 이동(navigate)할 때마다 호출될 함수이다.

• 매개변수로는 이동할 페이지의 라우트 객체인 to와 이동하기 전 페이지의 라우트 객체인 from이 있고 우리가 내비게이션 동작을 승인하거나 취소하기 위해 호출해야 하는 함수인 next가 있다.

next()

• 요 next를 실행() 하면 그냥 별다른 제어없이 넘겨준다는 뜻이다. 그런데 매개변수 안에 false를 넣으면 다음 페이지로 안 넘겨주기 때문에 로드가 안 되고 막힌다.

• 문자열일경우에는 router에 등록된 라우트중 하나를 넣어주면 된다. next('/users')

• 객체일경우는 router에서 사용했던 자세한 name, params를 지정해줘도 된다.

next({name: '라우트', params: {teamId:'t2'}})

beforeEnter(){}

• router 객체가 사용하는 것이 나닌 객체의 내부의 구성요소이다.

...
	{
      path:'~',
      components:{
          ...
      }, 
      beforeEnter(to, from, next){
        
      }
    }
...

• 이렇게 해두면 항상 ~ 라우터로 들어가전 이동을 승인하는 기능을 한다.

beforeRouteEnter(){}

• 만약 훅을 라우트 수준이나 router 구성에 등록하고싶지 않다면 컴포넌트에 새로운 훅이나 메서드를 추가하는 것도 가능하다.

<script>
export default {
	...
    beforeRouteEnter(to, from, next){
    	
    }
}
<\script>

• 만약 해당 컴포넌트가 Vue 라우터를 사용하면 메서드가 먼저 호출된 후 이 컴포넌트로의 이동이 승인된다.
  즉, 언제나 global 먼저 실행되고 라우트 구성 수준, 컴포넌트 수준으로 실행된다.
  그래서 상황에 맞춰 골라서 next를 호출하여 로직을 작성하면 된다.

beforeRouteLeave(){}

• 사용자가 뒤로가거나 양식을 입력 후 나가기 전 다시 한 번 확인을 하기 위해 사용되는 코드라고 생각하면 편하다.

beforeRouteLeave(to, from, next){
	if(this.chagesSaved){
    	next();
    } else {
    	//const userWantsToLeave = prompt('정말 나가실?');
        //const userWantsToLeave = confirm('정말 나가실?');
        next(userWnatsToLeave);
    }
}

beforeRouteUpdate(){}

• 컴포넌트 내부에서 직접 호출, 좀 더 정확히 말하자면 "재사용되는 컴포넌트 내부"에서 호출하는 것이다.

<script>
	...
    befreRouteUpdate(to, from, next){
    	this.메서드(to.params.속성값(teamId))
        next();
    }
</script>

afterEach(){}

router.afterEach(function(to, from){
	... 
})

• 이 메서드는 global 단위로 beforeEach와 같이 router가 직접 선언된 곳에서 사용된다.

• 그리고 당연 로드된 이후이기 때문에 next 메서드는 존재하지 않는다.

meta prop

• 메타는 router구성 요소중 routes의 JS객체 중 하나의 속성으로 들어간다.

const router = CreateRouter({
	history : ...,
    routes : [
    	{
        	name:"이름지정",
        	path:"/~",
            meta:{ 내가 원하는 속성값 : value },
            components:{default:value, key2:value2},
            children:[
            	{
                	name:""
                    ...
                }
            ]
        }
    ]
})

• 이것의 장점은 라우트 객체나 $route 객체가 있는 곳 모두에서 메타 필드에 액세스할 수 있다.

• 또한 meta에 작성해놓은 속성값을 그 밑에서 쓰일 여러 gaurd에서도 쓰일 수 있기 때문이다.

router.beforeEach(function(to, from, next) {
  if (to.meta.내가 원하는 속성값) {
    next();
  } else {
    next();
  }
});

• 이렇게 하면 장점 : beforeEach로 글로벌하게 조건을 부여할 수 있으면서도 meta로 개별 라우트별로 또 추가 로직을 작성할 수 있다.