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를 이용해서 문자를 인코딩한다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent