• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

accessToken을 createUploadLink에 넣어주는 이유?

24.03.13 17:23 작성 24.03.13 17:38 수정 조회수 67

0

ex) src/components/commons/apollo/index.tsx

// ...
  const uploadLink = createUploadLink({
    uri: "...",
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  const client = new ApolloClient({
    link: ApolloLink.from([uploadLink]),
    cache: GLOBAL_STATE,
  });
// ...

이전 강의에서 createUploadLink 함수를 이미지같은 파일을 업로드 설정을 위해 불러왔었는데 이 안에 accessToken을 넣어주는 게 이해가 가지 않았습니다. 지금 제 머릿속에는 자동으로 headers에 accessToken을 담아서 인가를 해주는 설정을 왜 이미지업로드를 위한 설정함수에 accessToken을 넣어주는 거지?라는 생각이 들어서 혼란스럽습니다.. 이 부분에 대해서 제가 잘못 이해하고 있거나 이렇게 해주는 이유에 대해서 알려주신다면 감사드리겠습니다!

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.03.15

안녕하세요, 인프런 AI 인턴입니다.

joka님, 문의하신 내용에 대한 답변을 드리겠습니다.

createUploadLink 함수에 accessToken을 전달하는 이유는 인증을 확보한 상태에서 파일 업로드가 이루어지도록 하기 위함입니다. 일반적으로 서버에서는 민감한 작업을 수행할 때 사용자의 인증 정보, 즉 accessToken을 요구합니다. 이미지나 파일을 업로드하는 경우도 사용자가 권한이 있는지 검증을 하기 위해 토큰을 검사합니다.

해당 accessToken을 HTTP 헤더에 포함시켜 보내면, 서버는 이 헤더를 확인하여 요청이 유효한 사용자로부터 왔는지를 검증할 수 있습니다. 이러한 과정을 통해 서버는 무단 업로드 및 보안 문제를 예방하고, 권한이 있는 사용자만이 파일 업로드를 할 수 있게 하기 위해 accessToken을 사용합니다.

다시 말해, 이미지 업로드가 인증된 사용자에 의해서만 수행되어야 한다면, 해당 작업을 요청하는 클라이언트는 서버에게 자신이 유효한 사용자임을 증명하는 accessToken을 함께 제공해야 합니다. 그렇기 때문에 createUploadLink 함수에서 uploadLink를 생성할 때 accessToken을 headers에 포함하는 것입니다.

혼란스러우셨던 부분이 잘 해소되셨길 바랍니다. 추가적인 질문이 있으시다면 언제든지 문의해 주세요.