[Vue router] 리다이렉트 오류 Uncaught (in promise) Errorr: Redirected when going from “A” to “B” via a navigation guard.

떠돌이개발자Aug 29, 2023

사용자들이 로그인해서 사용하는 사이트의 세션이 끊겼을 때

로그인 페이지로 이동하도록 다음과 같이 코드를 적용하였다.

정확한 이유는 모르겠으나

서버사이드 로그인페이지 주소(/common/login.do) 호출시

리턴코드로 404가 반환되었다.

그래서 URL 내용중에 login 문자열이 포함되어 있으면

로그인페이지로 이동하도록 처리하였다.

....생략.......
return axios.post(
	this.commAxiosUrl,
	searchParams,
	{ headers: { 'X-Requested-Type': 'XHR' } },
  )
  .catch((err) => {
	console.log('err.response-->', err.response);
	if (err.response === undefined) {
	  this.moveToLogin();
	  return;
	}
	let unauthorized = false;
	if (process.env.NODE_ENV === 'development') {
	  // local 개발환경: proxy로 인한 CORS 문제, xhr에러발생 시 권한없음(401)으로 간주
	  unauthorized = true;
	} else if (err.response && err.response.status === 401) { // 권한없음(401) 반환
	  unauthorized = true;
	} else if (err.response && err.response.status === 404 && err.response.request.responseURL.indexOf('/login') > -1) {
	  // 세션이 끊긴 후 로그인페이지로 이동되지 않고 not found (404)이 발생에 따른 조치
	  unauthorized = true;
	}
	if (unauthorized) {
	  this.moveToLogin();
	} else {
	  throw new Error(err.message);
	}
  })
  .finally(() => {
	console.log('finally');
  });

movetoLogin() {
  const userID = this.$getCookie('userID') || '';
  if (userID !== '') {
    this.$router.push(`/login/${userID}`);
  } else {
    this.$router.push('/login');
  }
},

정상적으로 해당 페이지로 이동은 되었으나

크롬 개발자 도구(F12) 콘솔창에는 다음과 같은 오류가 발생되고 있었다.

Uncaught (in promise) Error: Redirected when going from “/dsshboard” to “/login” via a navigation guard.

스택오버플로의 어떤 사람이 오류가 어디에서 왔는지 설명하는 내용이 있다.

다음과 같다.

경로 a, b 및 c가 있다고 상상해보십시오. 사용자가 경로 a에 있습니다.
그런 다음 경로 b로 보내야 하는 링크를 클릭합니다.
그런 다음 경로 가드에서 이를 잡아 경로 c로 리디렉션합니다.
이것은 경로 c로 리디렉션해야 하는 이유가 있었기 때문에 리다이렉션 처리합니다.
개발자는 이해가 되지만 사용자에게 불편한 경험이라고 결정합니다.
우리는 이해가 되지 않는 방식으로 경로 리디렉션을 호출해서는 안 됩니다

오류 해결을 위해 다음과 같이 시도하라고 설명한다.

router.push() 후 탐색 실패 오류에 대해 신경 쓰지 않으려면 catch를 사용하는 것이다.

# AS-IS
router.push('/b'); 
 
# TO-BE
router.push('/b').catch((e) => e);
 
# 또는 콘솔 로그 확인
router.push('/b').catch((e) => {
  console.log(e.response.status);
});

리다이렉션은 해야하고

오류는 무시하기 위해

다음과 같이 처리했다.

movetoLogin() {
  const userID = this.$getCookie('userID') || '';
  if (userID !== '') {
    this.$router.push(`/login/${userID}`).catch(() => {});
  } else {
    this.$router.push('/login').catch(() => {});
  }
},

[REFERENCE]