Vue 네비게이션 가드

Vue 네비게이션 가드

• 링크 : https://router.vuejs.org/kr/guide/advanced/navigation-guards.html

• 예제 코드

const requireAuth = function(to, from, next) {
  if (store.state.token) {
    const accessToken = store.state.token;
    setAuthInHeader(accessToken);
    next();
  } else {
    next(`/login?returnPath=${encodeURIComponent(to.path)}`);
  }
};

const routes = [
  {
    path: "/",
    component: Home,
    beforeEnter: requireAuth,
  },
]

• beforEnter : 라우터 경로 이동 전에 실행할 핸들러를 정의할 수 있음
• 네비게이션가드 함수는 to, from, next를 파라미터로 전달 받는다
• 각 역할 : ...
• 로그인에 실패 시 : next()메소드를 이용해 /login페이지로 이동하는데, 원래 가려고 했던 목적지는 to객체의 path프로퍼티에서 찾을 수 있다. 따라서 login 컴포넌트에 해당 경로를 전달하는데, 전역 객체로 사용할 수 있는, $route의 query 객체에 해당 값을 전달한다.(쿼리 스트링 형태). 이때, encodeURIComponent를 이용해서 문자를 인코딩한다.

• 쿼리 스트링 : ?name=value& ...
• encodeURIComponent : -Z a-z 0-9 - _ . ! ~ * ' ( 문자를 제외한 다른 문자들을 이스케이프한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent