[TIL] 저장된 JWT Token을 POST 하기

1. fetch, setItem( )

2차 프로젝트에서 장바구니 기능을 구현하면서 fetch 서버에 POST 요청을 하게 되었다.

먼저 로그인을 하면서 받아온 토큰을 로컬 스토리지에 저장한다.

//위 생략
.then(res => res.json())
.then(res => {
    if(res.access_token) {
       localStorage.setItem("access_token",res.access_token);
       }
    })
  }

localStorage.setItem(key이름 , key 값) 으로 로컬 스토리지에 저장한다.

2. getItem( )

장바구니에 담기 위해서는 먼저 로그인을 해야한다. 즉 access token이 필요하다.
로그인을 하면서 로컬 스토리지에 저장된 access token을 다시 fetch head에 담아 POST해야 한다.

처음에는 하드코딩으로 access token을 임시로 head에 넣어 POST 했다.

fetch("http://10.58.7.74:8000/cart", {
  method: "POST",
  headers: {
    Authorization: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MX0.pvaoHXfzEKZDOCUnkG9PGaEU995dykNUyOwbwbV2VtM",
    }

이제 이 임시코드를 로그인 했을때 로컬스토리지에 저장된 토큰으로 불러오도록 getItem() 메서드로 대체한다.🙂

headers: {
    Authorization: localStorage.getItem("access_token"),
    }