React 웹 개발중 Access Token 질문

Question

안녕하세요. React를 이용해서 모바일 웹/관리자 웹 페이지를 개발하고 있습니다.백앤드서버나, 모바일 앱에서 Access Token을 React에 전달해주면 그 값을 Zustand로 갖고 있다가 API 통신 할 때 해당 Access Token을 같이 보내려고 합니다.현재는 react-query, axios를 통하여 백앤드와 API 통신을 하고 있고, axios에서 통신을 할 때 Zustand에 있는 값을 가져다가 사용하려고 합니다.하지만 Zustand에 있는 값은 Hook 이기 때문에 axios에서 값을 세팅하거나 확인하려고 하면 Hook 오류가 발생하는데, Zustand에 선언한 컴포넌트 명을 use로 시작하는 것이 아닌 일반적인 컴포넌트의 형태로 선언해서 사용해도 문제는 없을까요?만약 꼭 use를 사용해서 해야한다면, 어떤식으로 세팅을 해서 진행해야 할까요?처음 react로 개발하다보니 아직 모르는 것이 많아서 질문을 올려 봅니다.

고수가될거야 · Answer

저같은 경우 서버에서 http only cookie로 access token을 내려주고 axios 인스턴스 생성할때 withCredentials: true로 줍니다. 그렇게 하면 매 axios 요청시마다 쿠키값이 전송됩니다그리고 서버에서는 매 요청시마다 cookie에서 access token을 받아와 검증합니다zustand에는 로그인 성공시에 username이라던가 간단한 유저 정보만 담아서 사용합니다

답변하면인사라도해주세요 · Answer

모든 것을 hook으로 해결해야 한다는 압박에서 조금 자유로워지셔도 좋을것 같습니다. ^^ AccessTokenManager 라는 static class 를 하나 만들어서 set은 local storage 혹은 session storage 혹은 그냥 메모리에 들고 있고, get은 내보내주면 어떨까요? hook은 이 클래스를 래핑해서 하나 만드시면 될 것 같은데요?

React 웹 개발중 Access Token 질문

2개의 답변

Q&A 목록