3월 13일 TIL

Token 재발급

• Token 재발급 같은 경우는 BackEnd와 정할것들이 있었다

1. 만료 시간
2. 토큰이 만료가 될때 어떤 에러를 Response로 줄것인지 등등

내코드

• 우리의 프로젝트는 만료시간과 만료될때 어떤 에러를 Response 해줄것인지 그리고 error의 response body에 고유한 Message를 적어줬다
• 특별한 로직을 구현하진 않았고 Axios에 Interceptors를 이용했다

토큰이 필요하지 않은 Instance에 대한 Intercepters

baseInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    if (error.response.data.message === "Access Token Expiration") {
      const originalRequest = error.config;
      const res = await axios.post("http://15.164.185.150:8080/reissue", "",{
        headers: {
          Refresh: refrashToken,
        }
      });
      if (res.status === 200) {
        const newAccessToken = res.data.accessToken;
        baseInstance.defaults.headers.common["Authorization"] = newAccessToken;
        originalRequest.headers["Authorization"] = newAccessToken;
        localStorage.setItem("accessToken", newAccessToken);
        localStorage.setItem("memberId", res.data.memberId);
        localStorage.setItem("refrashToken", res.data.refrashToken);
        return axios(originalRequest); // 반환된 처리를 다시진행하게 만드는것
      }
    }
    return Promise.reject(error);
  }
);

• 예외처리에서 originalRequest._retry는 다시 요청을 했는지 확인하는것 하지만 사용하지 않은 이유는 백앤드에서 토큰 만료에 대한 확실한 메세지값을 주었기 떄문에 따로 더블체크는 하지않고 구현했다

Token이 필요한 Instance에 대한 Intercepters

tokenInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    if (error.response.data.message === "Access Token Expiration") {
      const originalRequest = error.config;
      const res = await axios.post("http://15.164.185.150:8080/reissue", "", {
        headers: {
          Refresh: refrashToken,
        }
      });
      if (res.status === 200) {
        const newAccessToken = res.data.accessToken;
        baseInstance.defaults.headers.common["Authorization"] = newAccessToken;
        originalRequest.headers["Authorization"] = newAccessToken;
        localStorage.setItem("accessToken", newAccessToken);
        localStorage.setItem("memberId", res.data.memberId);
        localStorage.setItem("refrashToken", res.data.refrashToken);
        return axios(originalRequest); // 반환된 처리를 다시진행하게 만드는것
      }
    }
    return Promise.reject(error);
  }
);

• Response를 Localstoreage에 저장하지 않고 다음엔 cookie에 넣어서도 적용 해봐야겠다
  • 어떤게 좋을지는 좀더 스터디해볼 예정