반응형
지난번 Axios 사용 방법에 이어서 Header에 토큰 사용 및 코드 관리 팁에 대해 알아보도록 하겠다.
저번 코드는 아래 링크로 ㄱㄱ
2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip
Header에 Token 함께 전송하여 보안관리하기 + 코드 관리 Tip
사용자가 로그인을 했을 때 생기는 API Key를 사용하여 다른 페이지를 이동할 때 토큰 검사를 통해 페이지 관리와 API 보안을 설정하였다.
Rest API 를 관리하는 모든 코드는 API 라는 파일을 따로 만들어 관리하였고, 코드를 import하여 함수들을 사용할 수 있도록하였다.
사용자의 API key가 담긴 token은 로컬 스토리지에 저장하여 사용하였다.
- ResourceApi.js
import axios from 'axios';
// 인자로 id를 받도록 설정
export const getShareNotices = async (id) => {
// Axios를 사용하여 'http://localhost:8080/api/shareNotices' GET 기능으로 data 읽어오기
// 요청 헤더에는 localStorage에서 가져온 'token' 값을 Authorization 헤더에 설정
const response = await axios.get(`http://localhost:8080/api/shareNotices`, {
headers: { Authorization: localStorage.getItem('token') },
});
return response.data; // GET 요청으로 받아온 응답 데이터를 반환
};
- Notices.js
import { getShareNotices } from "../../../Api/ResourceApi";
const [shareNotices, setShareNotices] = useState([]);
// 컴포넌트가 마운트되었을 때 useEffect를 사용하여 비동기적으로 getShareNotices() 함수를 호출
useEffect(() => {
getShareNotices().then(function (data) {
setShareNotices(data); // getShareNotices() 함수에서 받아온 데이터를 shareNotices 상태 변수에 설정
console.log(data); // 응답 데이터를 콘솔에 출력
});
}, []); // 빈 배열을 의존성 배열로 전달하여 컴포넌트의 첫 마운트 시에만 실행
다들 화이팅 ~!
* 개발자도 책을 읽어야합니다!
반응형
'코딩 > React' 카테고리의 다른 글
[React] console, warning, error 메세지 제거 (1) | 2023.10.05 |
---|---|
[React] filter 함수를 활용한 검색 기능 (feat Axios) (2) | 2023.10.02 |
[React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip (2) | 2023.07.18 |
[React] useCallback을 활용해서 파일 다운로드 버튼&기능 구현하기 (0) | 2023.07.09 |
[React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기 (3편 - 오늘 표시하기 + Event 날짜 표시) (2) | 2023.07.08 |