인증&인가(세션편)

✅ 세션이란

• 사용자(클라이언트)와 서버 간의 연결이 활성화된 상태(==인증이 유지되고 있는 상태==) -->HTTP특성(무상태, 비연결성)때문에 어색하게 느껴질 수 있는데 그걸 가능하게 하는 게 [쿠키, 세션]을 이용한 인증의 처리때문에 가능하다.
• 로그인 성공 -> 서버에서 세션 생성 & 저장(key-value형식) -> 세션의 key(sessionID)를 브라우저에 전달(by쿠키) -> 그 세션 키를 브라우저에서 가지고 있으면 계속해서 요청을 할 때마다 브라우저에 있는 키를 서버에 자동으로 요청하니까 계속 연결이 되어있는 것처럼 동작이 가능하다.
  1⃣

로그인(인증) CLICK

로그인 하기 -> 브라우저에서 서버에다 요청을 보낸다 -> 서버는 그의 맞는 정보가 db에 있는지 확인하고 있다면, 세션 ID를 발급 받아서 -> 그 세션ID를 브라우저에게 전달 -> 브라우저는 그 세션 ID를 쿠키에 저장
2⃣

리스트 요청(인가) CLICK

인증이 완료된 사용자(클라이언트)는 어떤 LIST를 서버에 요청한다(인가 요청) -> 서버에게 쿠키에있는 세션 ID를 같이 보내기 때문에(타이핑을 하지 않아도 자동으로 보내기때문에) -> 서버는 그걸 받아서 세션 스토리지에서 실제로 있는 세션인지 확인을 한다. -> 있다라고 한다면 DB를 뒤져서 그에 맞는 응답 값을 주는 것
==> request헤더에 이 세션 ID가 있어야 된다.

😎코드를 통해 살펴보자구

const handleLogin = async () => {
   const response = await axios.post(
	`${BASE_URL}/login`, {
	   id,              ----->1. post요청으로 response 받아오면 
	   password,
	},
	{withCredentials : true}
	)
};
-----------------------------------------------위는 axios 콜
setId("")
setPassword("")
console.log("response:", response);
 if(response.status === 200) {   -->2. response 잘 전달 
   setStatus("인증완료");
 } 
 -------------------------------------response받아서 응답주기
const getData = async () => {
const response = await axios.get(`${BASE_URL}/product-list`, { withCredentials : true,})
console.log("response:", response)
setData(response.data.data)
 }
 
 //1. response해서 받아오는 것들 중에서 서버에서 자동으로 세팅해주는 것들이 있다. 그중에서 세션id가 있는데 이것을 클라이언트의 쿠기에 자동저장이 된다.
 //2. 세션 id를 가지고 있는상태에서 get데이터를 요청했을 때~

axios 옵션은 사실 3가지다
1. url
2. data
3. config => withCredentials는 자격 증명을 사용하여 사이트 간 엑세스 제어 요청(CORS)을 해야 하는지 여부를 나타낸다. (cors정책 만족)
==클라이언트는 3000번 port를 사용 서버는 4000번 port사용. 이 두개는 각각 분리해놓은 다른 서버이기에 withCredentials 옵션을 true로 해줄 것==
▶ withCredentials을 false로 했을 때 아니면 없앴을 때
--> response에서는 set쿠키를 잘 받아왔지만 애플리케이션엔 쿠키가 안 담긴다. 즉 이 옵션(withCredentials)이 없다면 서버에서 세션id를 주더라도 클라이언트에서는 쿠키를 자동으로 담을 수 없다!!

▶ 서버쪽에서 credentials : true를 false로 하거나 없앴을 때
---> 아예 통ㅅ인이 안 되서 CORS에서 바로 오류가 뜬다.

결론 : 클라이언트&서버쪽에서 둘 다 true로 해줄것

쿠키와 세션을 결합해서 서버와 클라이언트가 통신하는 방식
(로그인 : 리스트 요청) = (인증 : 인가)