안녕하세요. 강사님...
좋은 강의 항상 감사합니다.
다름이 아니라 강의때 배운거 실전에 써먹어보려고 합니다.
아래 코드 처럼 인터셉터에서 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;
}
안녕하세요 지혁님, 좋은 질문 주셨는데 제가 답이 조금 늦었네요 :) 첨부해 주신 코드를 보니까 액시오스 에러 핸들링 하는 코드 부분에 비동기 처리가 보장이 안되어서 아마 의도하신 흐름대로 진행이 안될 것 같아요. 아래 글 보시고 async await 적용해 보시면 좋을 것 같습니다. 그래도 화면이 갱신 안되는 부분이 있다면 밑에 추가해 드린 영상도 함께 보세요 :)
댓글