❗ 서론
이번 글은 타프로젝트를 하다가 refresh token까지 쓸 일이 있어서 해당 기능을 구현 후 쓰는 글이다 !
https://growing-jiwoo.tistory.com/85 해당 글에서 추가적으로 refresh token을 발급받는 방법에 대해서 알아보려한다.
그러기에 이번 글은 코드와 간단한 설명만으로 짧게 다룰것이다.
바로 코드를 보자.
❗ axios interceptor로 refresh token 발급하기 예제 코드
import { useCookies } from "react-cookie";
import axios, { AxiosInstance } from "axios";
import { useNavigate } from "react-router-dom";
const useAxiosWithAuth = (): AxiosInstance => {
const [cookies, setCookie, removeCookie] = useCookies(["jwt"]);
const navigate = useNavigate();
const createAxiosInstance = () => {
return axios.create({
baseURL: "{baseURL 적기}",
});
};
let axiosInstance = createAxiosInstance();
axiosInstance.interceptors.response.use(
(response) => response,
async (error) => {
const statusCode = error.response?.status;
if (statusCode === 419 || statusCode === 401) {
try {
const refreshResponse = await axios.post(
"{refresh token 발급 API URL}",
{ refresh: cookies.jwt }
);
console.log(refreshResponse);
const newToken = refreshResponse.data.accessToken;
setCookie("jwt", newToken);
axiosInstance = createAxiosInstance();
error.config.headers["Authorization"] = `Bearer ${newToken}`;
return axiosInstance(error.config);
} catch (refreshError) {
removeCookie("jwt");
navigate("/");
return Promise.reject(refreshError);
}
}
return Promise.reject(error);
}
);
return axiosInstance;
};
export default useAxiosWithAuth;
여전히 axios interceptor는 custom hook으로 구현하였다.
내가 구현한 refresh token의 발급 조건은 만료되거나, 유효하지 않은 토큰일 때 발급하는 401에러와 419에러를 조건으로 삼아 구현하였다.
해당 조건에 충족한다면 await를 사용해서 refresh토큰 api를 호출하고 호출이 완료되고 refresh token의 발급이 성공적으로 완료가 된다면 기존 토큰을 새로 발급받은 refresh 토큰으로 재정의하는 로직이다.
그리고 에러가 뜬다면 기존 토큰도 만료되었고 refresh 토큰 발급도 실패했기 때문에 쿠키에 저장된 토큰을 삭제하고 첫페이지로 navigate하고 에러를 출력하는 로직이라고 보면 된다 !
'자바스크립트 - React.js' 카테고리의 다른 글
[React.js] useEffect와 async/await 함께 사용하기 (0) | 2023.06.12 |
---|---|
[ReactQuery] StaleTime과 CacheTime에 대해서 알아보자 (0) | 2023.06.08 |
[React.js] @emotion/styled + Tailwind (feat. Twin Macro)에 대해 알아보자 (0) | 2023.04.21 |
[React.js] storybook 에러 - Error: No configuration files have been found in your configDir (0) | 2023.04.20 |
[React.js] axios interceptor로 axios header에 토큰 삽입하기 (0) | 2023.03.22 |