[vue.js] Navigation Guard

1. 네비게이션 가드 

   정의 : 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 말한다.

  어디다 사용?  고객 인증정보 없으면, 페이지 접근 못하게 하는 식으로 사용

2. 종류

  1) 전역가드 : beforeEach()

    전역가드는 라우터의 인스턴스를 참조하는 객체로 설정할 수 있으며, 모든 네이게이션의 생성된 순서에 따라 호출한다.

const router = new VueRouter({ 

}) 

router.beforeEach((to, from, next) => { 

})

router.beforeEach를 호출하면 모든 라우팅이 대기상태가 된다. 해당 url 로 라우팅하기 위해서는 next()를 호출해줘야한다. 

next 호출전까지는 대기 상태에서 머물기 때문에 화면전환이 이루어지지 않음.

참고자료 : https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/ 

  2) 라우터 가드 : beforeEnter()

    라우터 가드는 전체라우팅이 아닌 특정 라우팅에 대해 가드를 설정한다.  

//router.js

const requireAuth = () => (to, from, next) => {
	if (sessionStorage.getItem(process.env.VUE_APP_ACCESS_TOKEN)) {
	  return next();
	}
	next('/');
  };

export default new Router({
	mode: 'hash',
	base: process.env.BASE_URL,
	routes: [
  			{
   			 path: '/dashboard',
			 component: () => import('@/views/basePages/Index'),
   			 beforeEnter: requireAuth(),
  			},
            ]
 })           

  3) 컴포넌트 가드 : beforeRouteEnter(), beforeRouteUpdate(), beforeRouteLeave() 

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://beomy.tistory.com/75