[ 항해99 실전프로젝트 ] interceptor를 활용해 refresh token 관리

결국 받아온 토큰을 저장할 때,
1. refresh token은 local storage에 저장하고, access token은 cookie에 저장하라
2. 요청 헤더에는 access token을 넣어라
3. access token이 만료됐다고 하면, refresh token을 가져와 새로운 token을 발급받는 요청을 하여 갱신해라

 

여기서 axios의 interceptor를 사용하면, 서버에서 오류를 던져주고 클라이언트에 도착하기전에 http요청을 가로채 다시 요청을 할 수 있다?

 

 

아래는 interceptor를 연습한 코드이다.

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const {
      config,
      response: { data },
    } = error;
    const prevRequest = config;
    if (data.message === "refresh가 일치하지 않습니다.") {
      try {
        prevRequest.headers = {
          "Content-Type": "application/json",
          Authorization: token,
          refresh: refreshToken,
        };
        return await axios(prevRequest);
      } catch (err) {
        console.log(err);
        new Error(err);
      }
    }
    return Promise.reject(error);
  }
);

결과적으로는, 서버에서 특정토큰이 일치하지 않는다는 메세지를 던져주면 요청을 가로채 수정한 뒤 다시 보낼 수 있다.

refreshToken으로 보안을 유지할 때, interceptor를 사용하는 것 같다.

 

• 위에 코드를 해석해보면, 서버에서 토큰이 있으나 만료되었을 경우 특정 메시지를 보내주고
• 특정 메시지를 받을 때만, 헤더에 리프레쉬토큰을 다시 붙여서 보내준다.
• 그럼 새로운 액세스토큰을 다시 쿠키에 저장하면 된다.

 

여기서 추가적으로 알아야할 점은

• 토큰을 어디에 저장하는 것이 가장 안전한 지
• 쿠키를 설정하는 옵션에는 어떠한 것들이 있는 지
• interceptor로 이용할 수 있는 다른 기능들은 있는 지