로그인 통신, 토큰 받고 사용하기, jwt

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다.

로그인 한 유저에게는 토큰(JWT)을 발급하고 이를 브라우저의 로컬스토리지에 저장해서 관리합니다. 이후 마이페이지 접속이나 상품 주문 및 삭제의 동작을 할 때는 해당 토큰을 제시해 인증된 사용자라는 것을 알려야 합니다. 아래 코드는 로그인 과정 및 저장한 토큰(JWT)을 활용한 예시입니다.

이메일고 비밀번호를 입력하는 input 태그에 onChange 이벤트 속성으로 handleInput 함수를 연결해 입력되는 value 값을 가져옵니다.

  const [userInput, setUserInput] = useState({
    email: '',
    pw: '',
  });
  const { email, pw } = userInput;

  const handleInput = e => {
    const { name, value } = e.target;
    setUserInput({ ...userInput, [name]: value });
  };


// 아래 input 태그의 값을 받아옵니다.

  <input
    onChange={handleInput}
    className="userInput"
    name="email"
    type="text"
    placeholder="이메일"
    autoComplete="username"
  />
  <input
    onChange={handleInput}
    className="userInput"
    name="pw"
    type="password"
    placeholder="비밀번호"
    autoComplete="current-password"
  />

아이디와 비밀번호 입력 후 로그인 버튼을 누르면 아래 함수를 실행합니다. fetch 함수로 백엔드에 이메일, 비밀번호를 전송합니다. 콘텐츠 타입을 설정해야 하고 body 에 담기는 정보는 json 으로 변환해서 요청합니다. 첫번째 응답에서 통신에 성공하면 JSON 을 객체로 변환하고, 두번째 응답의 메시지를 확인해서 성공이면 로컬 스토리지에 토큰 정보를 저장합니다.

  const login = e => {
    e.preventDefault();
    fetch('http://3.35.54.156:3000/users/signin', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      body: JSON.stringify({
        email: email,
        password: pw,
      }),
    })
      .then(response => {
        if (response.ok === true) {
          return response.json();
        }
        throw new Error('에러 발생!');
      })
      .catch(error => alert(error))
      .then(data => {
        if (data.accessToken) {
          localStorage.setItem('TOKEN', data.accessToken);
          alert('로그인 성공');
          navigate('/');
          window.location.reload();
        } else {
          alert('로그인 실패');
        }
      });
  };

이후 로그인한 사용자만 접근한 장바구니에서 데이터를 불러온다면 로컬스토리지에 저장한 토큰을 가져와서 fetch 함수의 header 에 담아주어야 합니다. (localStorage.getItem() 사용)

  useEffect(() => {
    fetch('http://3.35.54.156:3000/cart', {
      headers: {
        authorization: localStorage.getItem('TOKEN'),
        'Content-Type': 'application/json;charset=utf-8',
      },
    })
      .then(response => response.json())
      .then(json => setCartProducts(json.cart));
  }, []);