기본적인 사용 예시 ( 로그인 상태가 필요없는 경우 )

아래 코드는 흐름 정도만 참고 !

E .G ) 로그인, 회원가입, 이메일 인증 등

로그인 인증이 필요없는 경우에는 아래처럼, API 과 명세를 통해 필요한 데이터를 JSON Key : Value 형태로 보내면 됨.

import axios from 'axios';

axios.post('<https://your-api-endpoint/login>', 
{
    userId: 'ADMIN', // 사용자 아이디
    password: 'PASSWORD' // 비밀번호
})
    .then(response => {
        // 성공시 핸들링 
    })
    .catch(error => {
		   // 실패시 핸들링 
        console.error('Error during login:', error);
    });

로그인 상태가 필요한 경우

E.G ) 로그인 이후 → 글 작성, 댓글 작성 등

로그인 상태가 필요한 API의 호출이라면 아래와 같이 토큰 정보를 같이 넣어서 전송해야 해.

<aside> 💡 headers: { 'Authorization': Bearer ${token} } 주의 ! Bearer 다음에 공백 하나 띄워주고 요청 보내야 돼.

</aside>

• 토큰이 뭔데 ?

‣

쉽게 이야기해서, 로그인을 할 때 백엔드에서 프론트에게 응답으로 accessToken 과 refreshToken을 발급해줘. AccessToken 에는 사용자 정보가 들어있고, 일정 시간동안만 유효해. 해당하는 시간이 지나면 만료되고, 이후에 refreshToken 을 통해 Access token을 재발급해주는 구조인거지.

→ 즉 로그인 이후에, 해당하는 accessToken 을 프론트에서 위에 보이는 형태로 다시 백엔드에 request header에 넣어주면 백엔드는 이 토큰에 담겨있는 사용자 정보를 통해, 해당하는 유저가 유효한지 체크해주는거지.

한 줄 요약 : 토큰이 필요없는 경우에는 API 명세를 보고 body 부분에 필요한 데이터만 넣어주면 되고

토큰이 필요한 경우(로그인 이후 동작)들은 body 에 필요한 데이터 + 헤더에 이러한 사용자 정보가 담긴 AccessToken 의 값을 넣어서 전송하면 돼.

https://velog.io/@eeeve/HttpOnly와-Secure-Cookie

- 토큰은 어디에 저장 ( 프론트단 )?

로컬 스토리지: 지속적이며, 새로고침이나 브라우저를 닫아도 데이터가 유지됨. (XSS 공격에 취약)

세션 스토리지: 탭이나 브라우저가 닫힐 때 사라짐. XSS 공격에 여전히 취약하지만 로컬 스토리지보다 보안이 다소 나음.

→ 우선 토큰값은 세션 스토리지에 저장해서 진행하는게 좋아보임. httponly-쿠키 방식으로 리팩토링은 시간이 남으면 추가적으로 구현해볼게 ‣

import axios from 'axios';

const token = 'your-jwt-token'; // 실제 JWT 토큰 값

axios.post('API_URL',  
    {
      content: inputValue // body 에 들어갈 데이터 
    },
    { 
      headers: {
        'Authorization': `Bearer ${token}`  // 실제 토큰으로 변경
      },
    })
  .then((response) => {
    // 성공시 핸들링 
  })
  .catch((err) => {
    // 실패시 핸들링 
  });