[React] Axios - Header에 토큰 전송 및 코드 관리 Tip

지난번 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); // 응답 데이터를 콘솔에 출력
  });
}, []); // 빈 배열을 의존성 배열로 전달하여 컴포넌트의 첫 마운트 시에만 실행

 

다들 화이팅 ~!

 

 

* 개발자도 책을 읽어야합니다!

YES24