네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 말한다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술이다.
네비게이션 가드의 종류
- 전역 가드: 애플리케이션 전역에서 동작
- 라우터 가드: 특정 URL에서만 동작
- 컴포넌트 가드: 라우터 컴포넌트 안에 정의
전역 가드
모든 네비게이션에 대해 발생되는 네비게이션 가드이다. 즉, 페이지 이동이 발생할 때마다 실행된다.
- 라우터 인스턴스를 생성한다.
var router = new VueRouter();router변수에.beforeEach()API를 호출한다.
router.beforeEach((to, from, next) => {
// to : 이동할 url 정보가 담긴 라우터 객체
// from : 현재 url 정보가 담긴 라우터 객체
// next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수
});router.beforeEach()를 호출하고 나면 모든 라우팅이 대기 상태가 된다. 여기서 해당 url로 라우팅 하기 위해서는 next()를 호출해줘야 한다.
next() 를 parameter 없이 사용하면 이동하려고했던 라우트로 이동한다. 만약 인자를 전달하면 (ex: next('/') , next({ path: '/' })) 해당 라우트로 리다이렉트 된다.
라우터 가드
전체 라우팅이 아니라 특정 라우팅에 대해서 가드를 설정한다.
import { store } from "../store/index";
export const router = new VueRouter({
routes: [
{
path: "/",
name: "indexPage",
component: IndexView,
beforeEnter: (to, from, next) => {
if(store.state.isLogin){
next();
} else {
next("/login");
}
},
},
],
});store를 불러온 후 store.state로 vuex에 저장된 state에 접근할 수 있다. isLogin의 값을 확인해서 다음단계로 보낼지 아니면 로그인 페이지로 보낼지를 정의한 것이다.
컴포넌트 가드
라우터로 지정된 특정 컴포넌트에 가드를 설정한다.
컴포넌트 내부에 아래와 같이 가드를 등록하면 된다.
export default {
beforeRouteEnter(to, from, next) {
/* 네비게이션 이동이 확정된 후
컴포넌트가 만들어 지기 전에 실행되는 가드 */
},
beforeRouteUpdate(to, from, next) {
/* 같은 컴포넌트 아래서
새로운 라우트가 불렸을 때 실행되는 가드 */
},
beforeRouteLeave(to, from, next) {
/* 라우트를 떠날 때 실행되는 가드 */
},
};beforeRouteEnter 는 아직 컴포넌트가 렌더링되지 않았기 때문에 this 객체에 접근할 수 없지만 나머지 두 개는 this에 접근이 가능하다.
동적 라우트 매칭에서 parameter만 변경되는 경우, 컴포넌트의 라이프 사이클 훅이 호출되지 않는다. 따라서 네비게이션 가드 중 하나인 beforerouteUpdate를 사용하면 새로운 훅을 만들 수 있다.
