token에 관하여

프로젝트 진행하며 로그인을 구현하게 되면서 자연스럽게 토큰을 관리하게 되었다. 

문제 : 

axios.create()로 api instance 생성하여 headers에 바로 토큰을 넣어서 api 요청시 로그인 후 새로고침하지 않으면 토큰을 정상적으로 받아오지 못하는 현상이 발생했다.

 

문제 이유 :

axios가 매번 header를 업데이트하지 않아서 토큰도 이에 따라 새로고침 전까지는 authorization에 토큰 값이 들어가 있지 않게 된 것이다.

 

과정

1. 우선 토큰을 어디에 저장하느냐에 대해 로컬스토리지 vs 쿠키

2. 쿠키에 저장했다. 그 후 원래 토큰값을 하드코딩해서 넣어뒀던걸 쿠키에 있는 토큰을 가져와서 axios.create()로 api instance분리된 곳에 넣어주고 싶었는데 document 오류떠서 api instance에서는 쿠키 불러오기가 안 됐음. 

3. 그래서 우선 찜찜하고 비효율적인거 같긴 하지만 zustand store를 사용해서 로그인시 토큰 저장하고 스토어에서 토큰 꺼내오는 형식으로 구현했다.

4. 근데 로그인 후 메인페이지에서 다른 api들을 불러올 때 token값이 안 들어가는걸 확인

4-1 api 요청이 Bearer undefined or Bearer 이런식으로 갔었음. setState 비동기 처리되는거 같다 생각해서 useEffect나 그런거 생각해서 해결방법을 찾았었다. (못함)

5. 토큰 관련해서 찾아보니 원래는 api instance에 header 하드코딩? 형식으로 auth 에 bearer ${token} 이런식으로 넣었었는데 구글링 및 다른사람 코드 참조하면 로그인 후 다음 로직에
axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;  

이런식으로 헤더 설정을 해주는 방법이 있어서 적용했을 때 처음 로그인 -> 메인 갔을때 Authorization이 잘 들어갔지만 새로고침하면 기존의 api- instance가 다시 갱신되면서 헤더값이 다시 설정되었다. 그래서 로그인 로직에 추가하고, api instance에 추가했었는데 이것도 뭔가 불편한 코드인거 같아서 찜찜한 느낌이 있어서 더 구글링을 했었다.

6. 근데 api instace가 사용되는 시기를 생각해보니, 처음 로그인할 때 api instance가 설정이 될 때, 이때는 토큰이 없으니까 당연히 header auth에 토큰이 안들어간 상태로 선언?이 되고 다시 업데이트가 안되는거 같았다.

7. 그래서 api instance가 사용될 때 마다 갱신이 되게? 하는 방법을 찾다가 gpt가 axios.interceptors 라는걸 알려줘서  적용했더니 됐다.!!! ( 너무 기쁨)

8. 인터셉터에 관한걸 구글링하며 찾아보니 내가 겪고 있던 문제와 정확하게 동일한 문제를 고민하던 사람이 꽤 많았다.
https://velog.io/@tnqls1211v/error-handling 

[Error Handling] FE 에러 핸들링 이모저모

9. 인터셉터에 대해. 결국 api instance에 apiInstance.interceptors.request.use문을 추가해서 해결

 

내가 이해한 대로 정리

axios.interceptors.request란 

axios를 사용하여 request 요청을 보낼 때 말그대로 인터셉터해서 확인을 해주는거 같다. 

예를들어

apiV1Instance.interceptors.request.use((config) => {
const accessToken = Cookies.get('accessToken');

if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`;
}

return config;
});

 

이렇게 되어있을 때, 요청을 보내기 전 인터셉터가 쿠키에 토큰이 있는지 확인하고 있으면 auth에 토큰을 넣어주는 그런 형식

 

해결된 이유 : 기존의 api instance는 처음 로그인 할 때 한번 선언됐다 새로고침 하기 전엔 계속 처음 선언된 api instance를 사용해서 token이 쿠키에 들어갔음에도 처음 선언된 api instance를 사용하니 토큰이 변해도, 처음 선언된 api instance를 사용해서 bearer값이 없는 상태가 유지되는거 같았는데, 인터셉터를 사용해서 계속 요청 보내기 전에 확인을 해주는거 같다.

 

 

※ 현재는 로그인과 회원가입할 때만 토큰값이 필요 없어서 토큰이 쿠키에 있으면 무조건 토큰값을 같이 보내는게 괜찮지만 나중에는 로그인 후 쿠키에 토큰이 있지만, 토큰값이 필요 없는 경우도 있을 수도 있기 때문에 수정이 필요한거 같다 . 

 

- 프로젝트 소개글

https://medium.com/@wellsy001012/fashion-cloud-개요-기술-포인트-a78d2cf77464