[Solved] Uncaught (in promise) Error: Redirected when going from "/login" to "/" via a navigation guard.

Vue에서 페이지를 이동 시킬때, 정상적으로 기능은 작동하더라도, 
위와 같은 에러가 발생하는 경우가 있어서, 어떻게 해결했는지 공유해보고자 합니다.

 

에러 메시지

원인

vue-router github의 답변을 보면,

router.push 함수는 Promise 객체를 리턴하므로, 만약 navigation failure에 대해 catch를 제대로 해주지 않는다면
위와 같은 에러가 발생한다는 것이다. (왜냐하면, promise rejection을 catch해주지 않았기 때문이다.)

 

하지만, 이런 navagation failure은 항상 일어나게 된다. 

 

---

말이 조금 어려웠다. 예를 들어 설명해보자.

 

1. 나는 현재 A페이지에 있고, B페이지로 가는 버튼을 클릭했다고 해보자.
(여기에서 B페이지로 이동하는 함수, goToB()를 이용했다고 가정하자.)

2. B페이지로 이동하려고 보니 navagation guard에 의해 C페이지로 이동하게 됐다. 

 

이 상황에서 B페이지로 이동하여야 하는 goToB()함수는 navigation failure을 하게 된 것으로 본다.
(원래 가려고 했던 B로 이동하지 못했기 때문이다.)

 

그리고 이러한 navigation failure 은 항상 일어난다.
즉, 애초에 이렇게 에러가 나도록 디자인 되어 있었다는 것이다.

 

---

해결책

그럼, 어떻게 해결을 할 수 있을까?

 

1. <router-link>

router-link를 이용하면 위와 같은 에러메시지는 발생하지 않는다. 

 

2. router.push().catch(() => {})

router.push를 해 준뒤에, 발생할 error를 catch 콜백을 통해 잡아주면, 더 이상 에러는 발생하지 않는다. 

 

예를 들어, 아래 코드 BEFORE에서 AFTER로 바꾸니 에러가 더 이상 나타나지 않았다.

// BEFORE
  this.$router.push({
    path: '/',
    query: this.otherQuery,
  })

  
// AFTER
  this.$router.push({
    path: '/',
    query: this.otherQuery,
  })
  .catch(() => {})

 

 

이 글은 스택오버플로우의 참고링크에서 많은 도움을 얻었습니다.