Navigation Guard

네비게이션 가드

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

 

 

[공식문서]

Navigation Guards | Vue Router

 

 

네비게이션 가드의 종류

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

 

 

 

전역 가드

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

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

 

URL이 변경되어 화면이 전환되기 전 router.beforeEach() 가 호출됨

-> 화면이 전환되지 않고 대기 상태가 됨

 

변경된 URL로 라우팅하기 위해서는 next()를 호출해줘야 함

-> next()가 호출되기 전까지 화면이 전환되지 않음

 

"Home으로 이동해보기"

-> to 에는 이동할 url인 home에 대한 정보가, from 에는 현재 url인 hello에 대한 정보가 들어있음

 

 

 

login 여부에 따른 라우팅 처리

router/index.js

 

 

 

 

라우터 가드

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

 

beforeEnter()

• route에 진입했을 때 실행됨
• 라우터를 등록한 위치에 추가
• 단 매개변수, 쿼리, 해시 값이 변경될 때는 실행되지 않고

"로그인된 사용자가 로그인 페이지로 가려고 할 때 HomePage로 보내주기"

 

라우터 가드는 해당되는 라우터 안에 작성

 

 

 

컴포넌트 가드

beforeRouteUpdate()

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

 

 

URL은 변하지만 페이지는 변화하지 않는 문제

=> 컴포넌트가 재사용 되었기 때문

=> lifecycle hook이 호출되지 않아 $route.params에 있는 데이터를 새로 가져오지 않음

 

=> beforeRouteUpdate()를 사용해서 params에 있는 데이터를 재할당 해주어야 함

예시)

 

 

 

 

404 Not Found

주소가 아예 존재하지 X  or 형식은 유효하지만 특정 리소스를 찾을 수 없는 경우

NotFound.vue

router/index.js

요청한 리소스가 존재하지 않는 경우

-> 모든 경로에 대해서 404 page로 redirect 시키기

• 기존에 명시한 경로가 아닌 모든 경로가 404 page로 redirect 됨
• 이때, routes에 최하단부에 작성해야 함