대략적인 인증 로직 구현 및 서버 통신 환경 설정

[cla6shade]

변경점 👍

변경점 매우 많으니 꼼꼼히 읽어주세요

• 서버에 요청 전송 시 저장된 설정을 일관적으로 사용할 수 있도록 axiosInstance를 작성했습니다.

import axiosInstance from '@/utils/network';
axiosInstance.get(url, options);

• endpoint를 정의하는 모듈을 만들었습니다.

  • 새로운 endpoint를 추가해야 할 경우 endpoints 객체에 key: value 형식으로 넣어주세요.
  • 요청 시 인증이 필요한 endpoint의 경우 authRequiredEndpoints에 엔드포인트: true 형식으로 넣어주세요.

• axios interceptor을 이용해서 헤더에 토큰 삽입/인증 실패 시 reissue 작업을 자동화했습니다.

• src/api 내부에 서버와 통신할 때 사용할 메소드(이하 api 메소드)를 정의했습니다. 메소드 작성 방식은 아래와 같습니다.

  • api 메소드는 항상 async function입니다.
  • api 메소드의 리턴값은 크게 두 종류입니다. 단일 데이터만을 받아오는 api의 경우(ex. access Token 등) response.data에서 해당 값을 바로 받아 리턴할 수 있고, 여러 종류의 데이터를 받아오는 api의 경우(pagination, 내 정보 받아오기 등) response.data를 통째로 리턴할 수 있습니다.

• 페이지 템플릿을 작성했습니다. 이는 src/pages내부에 작성할 페이지 컴포넌트에 적용할 템플릿입니다. hideHeader, hideFooter이라는 boolean prop으로 네비게이션 바/푸터 숨기기 여부를 설정할 수 있습니다.

• 메인 페이지를 작성했고 라우트 처리까지 완료했습니다.

• access Token의 경우 tokenStroage라는 객체를 통해 접근이 가능합니다.

import tokenStorage from '@/utils/storage';
tokenStorage.get();
tokenStorage.set('토큰'); // set으로 전달되는 파라미터가 undefined 또는 null인 경우 토큰값이 초기화됩니다.

매우 중요

이제부터 백엔드 api와 연결 작업을 본격적으로 수행해야 할 텐데, 프로젝트 최상위 경로에(src와 같은 경로. src 내부 아님) .env 파일에 서버 url을 아래와 같이 정의해둬야 합니다.

VITE_BASE_URL=ditto.pnu.app

[mingkyeongg]

고생하셨습니다~