token 관리

[sjyoung428]

제가 현재 서버에서 받아온 토큰을 로컬스토리지에 저장할 뿐만 아니라 상태 관리 라이브러리로 state처럼 사용하고 있는데 이 방식이 괜찮은 방식인지 궁금합니다

[starkoora]

@sjyoung428

• 로컬 스토리지에 저장하는 것과 javascript 변수 내에 저장하는 것 사이에 어떤 차이가 있는지 생각해보시면 좋을 것 같습니다.
• 각각의 저장 공간에는 어떠한 특성이 있나요?

[sjyoung428]

@starkoora

데이터의 영구성에서 차이가 있다고 생각합니다.

링크 위 링크의 글에서 로컬스토리지를 사용하지 않는 것이 좋다고하는 글을 읽고 난 후, 그 때부터 로컬스토리지를 사용할 때 로컬스토리지의 사용을 최소화 하기 위해 상태 관리 라이브러리에서 값을 불러오고 그 값을 사용할 때 상태관리 라이브러리에 저장되어 있는 값을 불러 오는 식으로 구현해왔습니다.

그런데 사용할 때마다 뭔가 비효율적인거 같기도 하고 다른 코드를 참고하더라도 로컬스토리지만 사용하는 코드가 많은 것 같아 질문드렸습니다.

[starkoora]

@sjyoung428

• 이 글은 예전에 저도 읽은 적이 있는데... 저 글에 따르면 결국 indexedDB를 간단히 사용하기 위해서는 idb 같은 wrapper를 설치해야 하는거고, 결국 이 부분부터 trade-off가 발생하는 것 같습니다.
• 말씀해주신 대로 로컬스토리지와 자바스크립트 변수의 차이라면 영속성이 있겠습니다. 하지만 또 한가지 차이가 있다면 후자의 경우 useState, useEffect 등과 함께 쓰인다면 상태 변화를 감지하여 UI에 반영할 수 있는 반면, 전자는 값이 변하더라도 반응할 수 없습니다. 이러한 특성들이 있기 때문에 어떤 상황에서 필요한지를 잘 따져 사용하면 좋을 것 같습니다.
• 우회적인 방법이기는 하지만 axios 인터셉터에서 토큰 관련 처리를 하다가 토큰이 유효하지 않아 인증 관련 에러가 발생했을 경우, 다른 페이지로 리다이렉트를 시키고, 이로 인해 변경된 pathname을 감지하는 useEffect를 작성한다면 state를 사용하지 않고도 UI 변화를 일으킬 수는 있습니다.

[sjyoung428]

@starkoora

실제로 토큰의 상태 변화 감지를 통해 리다이렉트를 구현 했는데 pathname을 감지하는 방식도 상당히 괜찮은 방법인 것 같습니다. 좋은 답변 감사합니다!

[Luceta]

보완성의 측면에서 생각하시면 로컬 스토리지의 토큰을 저장한다면 xss 기술의 해킹이 취약하고, 그렇다고 state로 토큰을 관리한다면, 인메모리로 관리하게되니 새로고침시 날라가는 현상이 있을텐데 각자의 장단점의 리소스를 따져서 토큰을 관리하시면 될 것 같습니다.