전역가드를 사용하여 보자

전역 가드를 사용하고자 할때 기본골격은 아래와 같다.

1
2
3
4
5
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
  // ...
});

#1 - 뷰라우터를 인식할 수 있도록 객체생성을 한다.

1
const router = new VueRouter({ ... });

#2 - 그 생성자 router의 .beforeEach를 사용한다.

1
2
3
router.beforeEach((to, from, next) => {
  // ...
});

여기서! 들어오는 인자값은!

  • to | (라우트) 현재 부분
  • from | (라우트) 현재부분으로 오기전 이곳으로 이동시킨 코드가 있는 라우트
  • next | (함수) 액션은 next에 제공된 전달인자에 달려있다. 라우트가 변경됬을시 무엇을 한것인지에 대한 액션이 필요

예로

로그인화면에서 로그인이 된 후 메인화면으로 이동시

1) 로그인화면 뷰에서는 라우트를 메인화면으로 이동시키는 this.$router.push(‘/‘);라고 했을시 저 코드를 따라 path가 ‘/‘으로 지정된 곳으로 이동한다.

2) path가 ‘/‘인 뷰에 와서 

1
router.beforeEach((to, from, next) => { // 이 코드를 만나면

참고: Vue Router