인프런 커뮤니티 질문&답변

 안녕하세요 강의를 다 듣고 개인 포트폴리오 제작중에 있습니다.

현재 로그인 부분을 구현중인데, 포인트 충전이라던가 마이페이지 접근시, 비밀번호 변경 시 등의 경우에 인가(여기선 fetchUser)를 받아야 한다고 이해했습니다.

그러려면, 강의에선 아래 사진처럼 header에 토큰을 넣어서 보내었습니다.

하지만 직접 프론트엔드를 구축해서 api 호출하려고 하니 header에 토큰을 넣어줘야 하는데, 현재 로그인시 그냥 토큰 값인 문자열을 리턴할 뿐 엑세스토큰을 저장하는 곳이 없습니다.

1. 보통 액세스토큰을 저장할 때 변수, 로컬스토리지, 세션스토리지, 쿠키 중 무엇을 가장 많이 사용하나요?

2. 섹션 13-11의 강의에서 처럼 변수에 액세스토큰을 저장하는 경우를 생각해 봤습니다. 그러면 인증하는 컴포넌트(ex: login)와 인가를 받는 컴포넌트(ex: 포인트 충전)가 다를 때 컴포넌트에서 token을 변수로 저장하더라도 다른 컴포넌트에서는 사용 못할텐데 recoil같은 라이브러리를 사용해서 전역변수로 사용해야 하는지 궁금합니다.

    

   아래는 프론트엔드의 login 컴포넌트를 예시를 적어보았습니다.

    

    

    

   const [token, setToken] = useState("");
   
   await axios.post("http://localhost:5656/graphql", {
               query: `
                   mutation {
                       login(id: "${inputId}", password: "${inputPw}")
                   }
               `,
           })
           .then(res => {
               setToken(res.data.data.login);
               }
           })

    

    

 감사합니다.