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

얼티밋님의 프로필 이미지

작성한 질문수

코드로 배우는 React with 스프링부트 API서버

Axios인터셉터와 AccessToken

Product게시판 이미지에 대해서

23.12.25 14:15 작성

·

270

0

토큰적용 후 발생하는 현상에 대해서 질문드립니다.

Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다.

jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다.

이런경우 어떠한방식으로 처리하는게 좋을까요?

src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}

답변 1

0

구멍가게코딩단님의 프로필 이미지
구멍가게코딩단
지식공유자

2023. 12. 25. 15:22

네.. 상품쪽은 강의에서 JWT가 처리되어야만 정상적으로 작동합니다. 예제에서는 로그인한 사용자들만이 상품관련 기능등을 사용할 수 있다고 가정했으니까요..

 

 

질문하신 내용은 서버에서 이미지 데이터를 가져오는데 뭔가 에러를 처리하고 싶은 상황이라고 생각하는데요..

그럼 Axios에서 BLOB데이터를 가지고 와서 이미지 태그를 생성하는 방식으로 처리하면 됩니다.

 

별도의 컴포넌트를 하나 만들어서

axios 의 repsonseType을 blob으로 지정하고 결과 데이터를 문자열로 저장한 후에 img의 src속성값으로 지정하는 방식입니다.

 

axios blob 라는 이름으로 검색하면 필요한 예제를 찾으실 수 있을 겁니다.

얼티밋님의 프로필 이미지
얼티밋
질문자

2023. 12. 25. 16:52

답변감사합니다. 에러처리에 대한 내용은 아니구요 '리덕스 툴킷'파트에서 Refresh 토큰을 이용한 Access 토큰 자동 갱신 회차까지 보았는데요 Product게시판으로 이동하면 이미지가 보이질 않아서 질문드려봤습니다.

image

구멍가게코딩단님의 프로필 이미지
구멍가게코딩단
지식공유자

2023. 12. 25. 19:25

JWTCheckFilter에 이미지 경로들은 패스할 수 있도록

 

//이미지 조회 경로는 체크하지 않는다면
if(path.startsWith("/api/products/view/")) {
  return true;
}

이 있는지 확인해 주세요

상품이 등록되면 upload 폴더 내에 저장되는데 폴더 내 파일들과 데이터베이스내에 상품 이미지 파일들이 존재해야 합니다.

상품이미지가 보이지 않는다면 '새 탭에서 이미지 열기'를 선택해서 경로를 확인해 주세요

image

해당 경로의 링크가

image

와 같은 방식으로 나오는지 확인하시고 upload폴더에 동일한 파일이 있는지를 확인해 주세요

 

image