백엔드

엑세스 토큰을 만들 때 5분으로.

---

프론트

리프레쉬 토큰

auth.context 에 provider 가 있으니까 여기에 리프레쉬 토큰을 쓰는걸 추천.

useEffect(()=>{
window.setInterval(()=>{console.log("안녕")},1000 60 4.5)},[])

1초가 아니라 5분(4분 30초 정도로 여유있게). + console 이 아니라 리프레쉬 토큰으로.

nextConfig 의 strict 모드 끄자.

useEffect(()=>{
window.setInterval(()=>{client.get()},1000 60 4.5)},[])

---

백엔드 user 를 뽑아서

---

refresh 로 살아나는법.

우리는 기존에 header 에 찔러줬어.
헤더는 axios 에 담겨있지. axios 는 axios.create 때 리액트가 구동되고 나서 생기는것.

새로고침하면, 리액트가 새로 고침되니까 비어있는 객체로 시작되는것.

어딘가 새로고침해도 바뀌지 않는 곳에 저장해 놨다가, 그 값을 꺼내서 리액트가 시작될때 넣어주면됨.

1. 로컬스토리지

1. axios 의 헤더에 토큰 넣기

2. context 에 들어있는 IsLoggedIn 값을 true 로 변경
   auth.setIsLoggedIn

3. 로컬 스토리지에다가 토큰을 저장해두기. SignUpForm 에서

• localStorage.setItem('accessToken', accessToken)
  시간은 1000*60 정도.

언제 또 이 비슷한걸 해야하지?

• 여권 새로받았으니까, 저장소에도 여권 바꿔줘야지. => auth.context 에 localstorage.setItem

auth context 에서 로그인이 될때만 refresh 가 실행되도록 설정.

---

여권이 필요한곳. api.client 에 가서 처음에 axios.create 해줄때

---

판매글 상세페이지는 ssr 문제없어.

근데 내 판매글 페이지는 ssr. => 쿠키를 가지고 ssr 가능해. 아니라면 csr 로 하자. 브라우저에서 내 토큰 가지고 있으니까.

처음에 생성할때

---

상태 관리 쪽에서도 local에 가지고 있으면, isloggedIn true 로 바꿔줘야해.

로그아웃

1. 엑시오스 헤더에 authorization 에 undefined 말고, 빈문자열 넣기
2. 컨텍스트에 있는 IsLoggedIn 을 false
3. localstorage 에 있는걸 clear or remove Item 하기.