api instance 관련되서 질문드립니다.

Question

안녕하세요. 강사님... 좋은 강의 항상 감사합니다. 다름이 아니라 강의때 배운거 실전에 써먹어보려고 합니다. 아래 코드 처럼 인터셉터에서 access토큰이 만료가 되었을때 refresh 토큰을 통해 새로은 access 토큰을 받아오거든요. 새로은 access 토큰을 세팅한 뒤에 이전에 요청했던 url을 받아서  사용자가 요청했던 화면 끊겨 보이지 않게 이동하도록 하려고 구글에서 검색해서 아래코드처럼 사용해봤습니다. 참고했던 자료에서 axios.create 구성이 비슷해서 토큰을 연장해서 다시 재요청까지는 성공합니다. response에서 데이터도 잘 받아어구요. 그런데 화면의 데이터가 변하지 않습니다. 강의의 메인화면을 페이징 처리해서 계속 불러오는건데 response에서 데이터는 받아왔지만 제대로 화면에 나타나지 않고 있는데요.. 어디부분을 더 수정을 해야할까요? 그리고 error.response.config을 axios의 newInstance를 매배변수로 받았을때 이전 url이  다시 요청되는게 왜 그러는걸까요? 원리가 궁금합니다.  답변 부탁드립니다. 감사합니다. import   store   from   '@/store/index' ; import   router   from   '@/routes/index' ; import   axios   from   'axios' ; import  {  saveAuthToCookie,   deleteCookie  }  from   '@/utils/cookies' ; import  {  instance   as   newInstance  }  from   '@/api/index' ; axios . defaults .withCredentials   =   true ; export   function   setInterceptors ( instance ) {    // Add a request interceptor    instance . interceptors . request . use (      function  ( config ) {        // Do something before request is sent        //   console.log(config);        config . headers .Authorization   =   'Bearer '   +   store . state .token ;        return   config ;     } ,      function  ( error ) {        // Do something with request error        return   Promise . reject (error) ;     } ,    ) ;    // Add a response interceptor    instance . interceptors . response . use (      function  ( response ) {        // Any status code that lie within the range of 2xx cause this function to trigger        // Do something with response data        return   response ;     } ,      function  ( error ) {        // Any status codes that falls outside the range of 2xx cause this function to trigger        // Do something with response error        const   originalConfig   =   error . response .config ;        console . log ( 'originalConfig : ' ,   originalConfig) ;        const   status   =   error . response .status ;        const   message   =   error . response . data .message ;        //토큰 만료시 refreshtoken으로 토큰 연장        if   (status   ==   401   &&   message   ==   'TokenExpiredError' )  {          axios            . post ( ` ${ process . env . VUE_APP_API_URL } auth/refreshToken` ,  {} )            . then ( function  ( response ) {              deleteCookie ( 'til_auth' ) ;              saveAuthToCookie ( response .data) ;              store . commit ( 'setToken' ,   response .data) ;              // originalConfig._retry = true;              originalConfig . headers .Authorization   =   `Bearer  ${ response .data } ` ;              return   newInstance (originalConfig) ;           } )            . catch ( function  ( error ) {              console . log ( error .response) ;              alert ( '인증이 완료되었습니다. 로그인 해주세요' ) ;              //state 삭제              // store.commit('clearUsername');              // store.commit('clearToken');              // //쿠키값 삭제              // deleteCookie('til_auth');              // deleteCookie('til_user');              //refreshtoken 만료 또는 없을때 로그인 화면으로 이동              if   ( error . response .status   ==   500 )  {                router . push ( '/login' ) ;             }           } ) ;       }  else   if   (status   ==   403 )  {          console . log ( '403 에러' ) ;          alert ( '권한이 없습니다.' ) ;       }        return   Promise . reject (error) ;     } ,    ) ;    return   instance ; }

captain · Answer

안녕하세요 지혁님, 좋은 질문 주셨는데 제가 답이 조금 늦었네요 :) 첨부해 주신 코드를 보니까 액시오스 에러 핸들링 하는 코드 부분에 비동기 처리가 보장이 안되어서 아마 의도하신 흐름대로 진행이 안될 것 같아요. 아래 글 보시고 async await 적용해 보시면 좋을 것 같습니다. 그래도 화면이 갱신 안되는 부분이 있다면 밑에 추가해 드린 영상도 함께 보세요 :) async await 글 입문자가 주의해야 할 5가지 특징 영상