[Vue] Error: Redirected from "/login" to "/" via a navigation guard

Vue에서 네비게이션 가드를 구현하는 과정에서 다음과 같은 에러메시지가 계속 출력되는 모습을 보게 됐다. 
어떻게 해결 할 수 있었는지 정리해보자.

 

Problem

기존에 나는 this.$router.push를 이용하는 방식을 통해 네비게이션 가드를 구현하고 있었고 아래의 코드는 그 예시이다.

this.$router.push('/myinfo/mydetail')

 

위 처럼 만들고 나니 아래와 같은 에러가 콘솔에 찍히는 것을 볼 수 있었다.

에러 메시지

 

Cause

다음 링크에서 원인을 파악할 수 있었다. 핵심부분을 발췌하자면 아래와 같다.

 Now, because both push and replace return a promise, if the navigation failure (anything that cancels a navigation like a next(false) or next('/other') also counts) is not caught, you will see an error in the console because that promise rejection is not caught

 

즉, router.push 혹은 router.replace는 promise를 리턴하는데, 해당 메소드에 callback함수가 제공되지 않을 때 상기의 메시지가 발생한다는 것이다.

 

 

Solution

그래서 어떻게 해결하면 되는가?

해결하는 방법은 router-link를 사용하는 방법과 callback함수를 제공하는 방법, 직접 push함수를 수정하는 방법으로 3가지가 있다. 

 

1. router-link

router-link는 noop callback을 기본적으로 제공하기 때문에, 위와 같은 현상은 router-link를 사용할 때에는 일어나지 않는다. 
(noop function: 아무것도 하지 않는 함수를 의미한다.)

 

2. callback 함수 제공

애초에 이 사단이 일어난 이유가 promise를 리턴함에도 navigation에 실패 했을 때 에러를 잡지 못하기 때문이다.

따라서, 아래처럼 간단히 noop callback을 이용해 잡아주면 된다.

router.push('/location').catch(err => {})

 

3. push함수 수정

global하게 한번에 처리하고 싶다면, 아래 코드처럼 직접 Router객체에 접근해 callback처리를 해주면 된다.(링크참조)

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

 

참고로, 나는 프로젝트의 상황을 기반으로 판단하여 2번 방식을 사용하기로 결정하여 적용하였고, it works like a charm!