[Django/React] 20. AUTHENTICATION: LogOut

Log Out 메뉴 만들기

로그인 상태에서 나의 아바타(아이콘)을 클릭하면 'Log out' 메뉴가 뜬다 

 

---

ChakraUI의 Toast

: 유저에게 메시지를 표시(팝업처럼)하는데 사용되는 알림 시스템. 일정 시간이 지나면 자동으로 사라짐 

 

---

"CSRF(Cross-Site Request Forgery) Failed" 

 

주로 웹 애플리케이션이 CSRF 방지 메커니즘을 적용했을 때, 클라이언트 요청이 필요한 CSRF 토큰을 제공하지 않거나 잘못된 토큰을 제공했을 때 발생

Django는 보안강화를 위해 어떠한 사이트에서든 post 요청을 신뢰하지 않음(디폴트로 CSRF 검증 매커니즘을 활성화) 

(get request는 문제없이 보낼 수 있음) 

 

CSRF Token

: CSRF 공격을 방지하기 위해 사용되는 보안 장치(고유 문자열)

  - 사용자의 요청이 신뢰할 수 있는지 확인하기 위해 서버에서 생성

     -> 클라이언트에 전달 

     -> 클라이언트가 이를 포함해 요청을 보낼때 검증 

 

우리 파일에서 이 문제를 해결하기 위해서

1) Django에서 이 도메인으로부터 오는 post request를 허락하도록 설정 

    : backend의 config -> settings.py 에서 CSRF_TRUSTED_ORIGINS = ["http://127.0.0.1:3000",] 추가 

2) backend에 post request를 보낼 때마다 headers of request에 CSRF Token을 넣어서 보내줌 

    : CSRF cookie를 axios에 넣어주어야 한다 

      js-cookie 설치 

     -> src > api.ts에서 import Cookie from "js-cookie"

---

queryClient

: React Query에서 서버 데이터를 관리 & 조작 

  - 데이터를 한 곳에서 관리: 서버에서 받아온 데이터를 React Query가 캐시에 저장 및 관리 

  - 서버에서 받아온 데이터를 queryClient로 바로 수정 또는 새로고침 

  - 데이터를 자동으로 동기화 

  - 주요 메서드: invalidateQueries, setQueryData, refetchQueries