1. Navigations Guard

• Vue Router를 통해 특정 URL에 접근할 때 다른 url로 redirect하거나 해당 URL로의 접근을 막는 방법

네비게이션 가드의 종류

동작하는 범위에 따라 세 가지로 나뉜다.

1. 전역 가드(global) : 애플리케이션 전역에서 동작
2. 라우터 가드(per-route) : 특정 URL에서만 동작
3. 컴포넌트 가드(in-component) : 라우터 컴포넌트 안에 정의

1) 전역 가드

이 포스팅에서는 'Global Before Guards'만 다루지만, 공식 문서에는 'Global Before Guards', 'Global Resolve Guards', 'Global After Hooks'의 세 가지가 있다.

Global Before Guards

• 다른 url 주소로 이동할 때 항상 실행
• router/index.js에 router.beforeEach()를 사용하여 설정
• 콜백 함수의 값으로 3개의 인자를 받음

1. to : 이동할 URL 정보가 담긴 Route 객체
2. from : 현재 URL 정보가 담긴 Route 객체
3. next : 지정한 URL로 이동하기 위해 호출하는 함수
   • 콜백 함수 내부에 반드시 한 번만 호출되어야함
   • 기본적으로 to에 해당하는 URL로 이동

• URL이 변경되어 화면이 전환되기 전 router.beforeEach()가 호출됨
• 넥스트가 호출하지 않으면 화면 전환되지 않고 대기 상태가 됨
• 변경된 URL로 라우팅하기 위해서는 next()를 호출해야함

예시 : 로그인 여부에 따른 라우팅 처리

// router/index.js

router.beforeEach((to, from, next) => {
  // 로그인 여부
  const isLoggedIn = false;

  // 로그인이 필요한 페이지
  const authPages = ['hello']

  // 로그인이 필요한 사이트인지 확인
  const isAuthRequired = authPages.includes(to.name) 

  if (isAuthRequired && !isLoggedIn) {
    // 로그인이 필요한 경우
    next({ name: 'login' })
  } else {
    // 로그인이 되어있다면
    next()
  }
})

로그인 하지 않아도 되는 페이지를 모아둘수도 있음

router.beforeEaxh((to, from, next) => {
const allowAllPages = ['login']
const isAuthRequired = !allowAllPages.includes(to.name)
}

2) 라우터 가드

Louter Guard

• 전체 route가 아닌 특정 route에 대해서만 가드를 설정하고 싶을 때 사용

beforeEnter()

• route에 진입했을 때 실행됨
• 라우터를 등록한 위치에 추가
• 단, 매개변수, 쿼리, 해시 값이 변경될 때는 실행되지 않고 다른 경로에서 탐색할 때만 실행됨
• 콜백 함수는 to, from, next를 인자로 받음

예시 : Login 여부에 따른 라우팅 처리

이미 로그인 되어있는 경우 HomeView로 이동하도록 처리

// router/index.js

// 임시로 로그인 상태 표시
const isLoggedIn = true;

const routes = [
  //...
  {
    path: '/login',
    name: 'login',
    component: LoginView,
    beforeEnter(to, from, next) {
      if (isLoggedIn === true) {
        next({ name: 'home' })
      } else {
        next()
      }
    }
  }
]

3) 컴포넌트 가드

• 특정 컴포넌트 내에서 가드를 지정하고 싶을 때 사용

beforeRouteUpdate()

• 해당 컴포넌트를 렌더링하는 경로가 변경될 때 실행

예시: Params 변화 감지

• params는 변화했으나 컴포넌트가 재사용된 경우, lifecycle hook이 호출되지 않아 params 변화를 컴포넌트가 감지하지 못하는 경우
• $route.params에 있는 데이터를 새로 가져오지 못함
• beforeRouteUpdate()로 params의 변화를 감지하게 함

// views/HelloView.vue

<script>
export default {
  name: 'HelloView',
  data() {
    return {
      userName: this.$route.params.userName,
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.userName = to.params.userName
    next()
  }
};
</script>