Quasar에서 Router Navigation Guard 사용하기

Router Navigation Guard 개요

 Vue에서는 페이지 이동시 Router를 사용합니다.

 그런데 사용자가 허가되지 않는 페이지로 이동하려고 할때, 이동에 대한 제어를 해야 하는데 이때 사용하는것이 Navigation Guard 입니다. 

 예를 들어 로그인을 하지 않은 사용자가 카드 결제 정보를 확인하는 페이지로 이동하기 위해서 강제로 URL을 입력했을때는 당연히 페이지 이동을 막아줘야 하는데, 이럴때 Navigation Guard를 사용하면 편하게 처리가 가능합니다.

 

사용방법

 Router는 src/router/routes.js와 src/router/index.js을 이용하여 관리하는데, 일반적인 경로 설정은 routes.js에서 합니다. 

 그렇지만 Navigation Guard는 index.js에서 설정합니다.

 Router.beforeEach 함수를 이용하면 이것들을 제어할 수 있습니다.

 

// src/router/index.js

// 각종 import ......

export default route(function ({ Vue }) {
  Vue.use(VueRouter);

  const Router = new VueRouter({
    routes,
    // 다른 설정...
  });

  Router.beforeEach((to, from, next) => {
      // 로그인 페이지로 이동하는 경우를 제외하고
      // 로그인하지 않은 사용자를 로그인 페이지로 리다이렉트합니다.      
      if ( to.path =="/login" || isLoggedIn()) {        
        next();
      } else {        
        next({ path: "/login" });
      }
  });

  return Router;

 

router.beforeEach API 구성요소

router.beforeEach(function (to, from, next) {
  // to : 앞으로 이동할 url
  // from : router 오기 직전 url
  // next : 위치 이동 함수로써 next()를 하면 to로 이동함
});