JavaScript Cookie (js-cookie) Link
JavaScript Cookie (js-cookie) 를 설치 및 사용하는 이유는 "CSRF" 문제해결을 위해서다.
CSRF(Cross Site Request Forgery) - "교차 사이트 요청 위조"를 말한다.
django 는 CSRF 해킹 때문에 모든 post 요청을 차단하는 보안 기능을 제공합니다.
이 때문에 우리는 JavaScript Cookie (js-cookie) 를 설치해서 django server에 post 요청을 보낼 때 csrf token 을 함께 보내서 django 에게 우리가 보낸 post 요청은 안심해도 된다는 것을 알려줘야 합니다.
npm i @types/js-cookie // installation
// 파일이름 : api.ts
import Cookie from "js-cookie";
// ...중략
// 변경전 코드
export const logOut = () =>
instance.post(`users/log-out`).then((response) => response.data);
// 변경후 코드
export const logOut = () =>
instance.post(`users/log-out`, null, {
headers: {"X-CSRFToken": Cookie.get("csrftoken") || "", },
}).then((response) => response.data);
// 파일이름 : Header.tsx
import { logOut } from "../api";
// ...중략
// onLogOut 함수정의
const onLogOut = async () => {
await logOut();
}
// ...중략
<MenuList>
<MenuItem onClick={onLogOut}>Log out</MenuItem>
</MenuList>