[Vue.js] axiox, onRequest, onError 중단시키기(Error 페이지 이동 막기)

개발환경

• Nuxt.js 2
• Vue.js 2
• Spring Boot 3요청사항 ❓
• API에 권한을 입히면서 특정 API 사용 시 alert를 노출시키고 페이지 이동은 원하지 않는다는 요청사항이 있어 이를 구현하였습니다.개발 내용 💭
• Back End에서 권한을 체크하는 AOP를 하나 만들어 체크를 원하는 API에 Annotation을 넣어 Exception처리를 하도록 구현하였습니다.
• Front End에서 해당 Error를 보고 권한에 대한 Error일 경우 alert를 발생시켜야 합니다.

문제발생 ❗

• 공통적으로 처리하기위해 axiox.onError({})로직에 처리를 하려다 보니 무조건 적으로 Error 페이지로 이동하는 현상 발생
• 이는 Nuxt 설정으로 헤더 정보를 보고 Error 발생 시 error.vue 페이지로 redirect 시킨다.

해결방법 💯

• Promise 객체를 빈 형대로 return 시켜준다.

  export default function({$axios, store, error:nuxtError}){
  $axios.onError(error=>{ 
      const status = error.response; 
      if(status == 403){ 
          const code = error.response.data; 
          if(code == 1001){ 
              alert(error.response.data.message) 
              //이 부분에서 Promise를 빈 값으로 초기화 시켜줌으로써 Error 페이지로 이동시키는 프로세스를 날려버린다. 
              return new Promise(()=>{}) 
          } 
      nuxtError({ status:error.response.status, message: error.message }) 
      return Promise.resolve(false); 
      } 
  }) 
  }