[TIL] 20210809 axios default header Authorization이 로그인 후 바로 들어가지 않는 현상/ 쿠키와 로컬 스토리지의 차이

문제발생

지금 만들고 있는 서비스에 로그인을 하자마자 인증이 필요한 요청을 보내게 되면

인증헤더에 아무것도 들어가지 않는 문제가 발생했다!

새로 고침하면 된다.

 

 

 

현재 상황

현재 우리 코드는 카카오 소셜 로그인의 정석적인 방법인

인가코드를 받아와서 그 인가코드로 토큰을 요청하는 방식을 실패하여

백엔드에서 URL로 토큰을 넘겨주고 프론트에서 재빠르게 그것을 localStorage에 저장하고 있다.

cookie의 경우 서버에서 응답받은 값을 바로 넣어줄 수 있다고 하여

현재의 코드는 cookie를 사용하지 못한다.

 

 

 

 

현재 axios 코드

import axios from "axios";

const instance = axios.create({
  baseURL: "우리 서버", // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
});

const token = localStorage.getItem('token');

// 가지고 있는 토큰 넣어주기!
// 로그인 전이면 토큰이 없으니 못 넣어요.
// 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
// instance.defaults.headers.common["Authorization"] = `Bearer ${token}`;

instance.defaults.headers.common["Authorization"] = token ? `Bearer ${token}` : null;
export default instance;

 

현재 이 Request.js 파일을 따로 만들어서

api요청을 보낼때 그래도 보내고 있다.

 

 

 

 

 

해결방법

이 파일은 맨 처음에 로그인 하기전에 만들어지기 때문에

토큰이 생기고 나서 새롭게 만들어지지 않기 때문에 생기는 문제라고 생각하여

App.js에서 토큰을 확인하고 헤더에 다시 넣어주는 코드를 추가했다.

const token = localStorage.getItem('token');
instance.defaults.headers.common["Authorization"] = `Bearer ${token}`;

 

 

 

지금 이 문제는 localStorage여서 문제가 생기는 것인가 싶었다.

cookie를 사용하면 Request.js에서 헤더를 넣어줘도 로그인 후 바로 헤더에 토큰이 안들어가는 일은 없을 것 같았다.

 

 

 

 

 

쿠키와 로컬스토리지의 차이

 whatarecookies.com

Cookies는 최대 4KB의 용량을 가진 데이터이다.

사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 방법으로 사용된다.

문자열만 저장할 수 있는 제한이 있다.

로그인을 한 후 쿠키에 저장하여 재인증을 거치지 않아도 된다.

후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다.

쿠키는 주로 서버측에서 읽기를 위한 것이다.

httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들 수 있다. 

 

Seesion cookies

• 만료일을 포함하지 않는다.
• 브라우저나 탭이 열려있는 동안에만 저장된다.
• 브라우저가 닫히면 cookies는 영구적으로 삭제된다.
• ex) 은행 유저들의 자격 증명을 저장하는데 사용될 수 있습니다.

Persistent cookies

• 만료일을 가진다.
• 이 cookies는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다.
• 유저들이 방문할때마다 유저 경험을 커스텀하기 위해 특정 웹사이트에서 행동을 기록하는 등 여러 활동들에 사용될 수 있다.

 

LocalStorage

• LocalStorage는 cookies보다 더 많은 장점이 있다.
• cookies와는 달리 모든 HTTP 요청에서 데이터를 주고받을 필요가 없다.
• 데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않는다.
• 최대 5MB의 정보를 저장할 수 있다.
• Javascript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않는다.
• LocalStorage를 사용하면 문자열 뿐만아니라 javascript의 primitives와 object도 저장할 수 있다.
• 개인정보보호를 위해 암호화를 하는 것이 좋다.

 

 

언제 사용하는 것이 좋을까?

 - 팝업 창 : Cookie

 - 자동 로그인 : LocalStorage

 - 입력 폼 정보 :  SessionStorage

 - 비로그인 장바구니 :  SessionStorage