액세스 토큰 저장

로그인 시 받은 토큰을 로컬 스토리지에 저장하는 것이 저의 로직이됩니다.

백엔드에 API콜을 할 때마다 로컬 스토리지에서 액세스 토큰을 불러와 헤더에 추가해 줍니다.

첫 번째로 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 코드를 작성해 보겠습니다.

apiservice.js 의 로그인하는 함수를 수정해 주어야 합니다.

export function signin(userDTO) {
  return call("/auth/signin", "POST", userDTO).then((response) => {
    if(response.token){
      //로컬스토리지에 저장
      localStorage.setItem("ACCESS_TOKEN",response.token);
      //token이 존재하는 경우 Todo화면으로 리디렉트
      window.location.href = "/";
    }
  });

그냥 콘솔만 나오는 코드에 이렇게 조건문을 넣어주었습니다.

두 번째로 모든 API의 해더에 액세스 토큰을 추가하는 부분을 구현해 보겠습니다.

로그인 관련되지 않은 모든 API 콜은 call메서드를 통해 이뤄집니다.

따라서 반복을 피하려면 call에 토큰이 존재하는 경우 헤더에 추가하는 로직을 작성해야합니다

import { API_BASE_URL } from "../api-config";
const ACCESS_TOKEN = "ACCESS_TOKEN";

export function call(api, method, request) {
  let headers = new Headers({
    "Content-Type": "application/json",
  });

  // 로컬 스토리지에서 ACCESS TOKEN 가져오기
  const accessToken = localStorage.getItem("ACCESS_TOKEN");
  if (accessToken && accessToken !== null) {
    headers.append("Authorization", "Bearer " + accessToken);
  }

  let options = {
    headers: headers,
    url: API_BASE_URL + api,
    method: method,
  };

  if (request) {
    // GET method
    options.body = JSON.stringify(request);
  }
  return fetch(options.url, options)
    .then((response) =>
      response.json().then((json) => {
        if (!response.ok) {
          // response.ok가 true이면 정상적인 리스폰스를 받은것, 아니면 에러 리스폰스를 받은것.
          return Promise.reject(json);
        }
        return json;
      })
    )
    .catch((error) => {
      // 추가된 부분
      console.log(error.status);
      if (error.status === 403) {
        window.location.href = "/login"; // redirect
      }
      return Promise.reject(error);
    });
}

export function signin(userDTO) {
  return call("/auth/signin", "POST", userDTO).then((response) => {
    if (response.token) {
      // 로컬 스토리지에 토큰 저장
      localStorage.setItem(ACCESS_TOKEN, response.token);
      // token이 존재하는 경우 Todo 화면으로 리디렉트
      window.location.href = "/";
    }
  });
}

엄청 길어보이겠지만 

처음에 const 엑세스 토큰을 호출하고,

로컬 스토리지에서 access토큰을 가져오도록했습니다. 

이렇게 로그인을 하고, 그것이 성공하면 최초 Todo화면으로 오게됩니다.

이제 글도 남겨집니다!!!

이제 로그인이 되었으니 로그아웃하는 로직과 그것을 위한 네이게이션 바, 

그리고 UI글리치문제가 다소 있습니다.(로그인하지도않았는데 Todo화면이 잠깐 보이는 현상)

그것을 해결하는 포스팅으로 만나뵙겠습니다!!!