[라인 어벤져스 LINE AVENGERS] localStorage의 token이용한 로그인/로그아웃

• 로그아웃 상태일 때는 로그인 버튼만, 로그인 상태일 때는 각 페이지의 링크와 함께 유저 정보와 로그아웃 버튼이 있는 박스가 보이도록 만들었다.

로그인/로그아웃 상태에 따라서 nav bar의 상태를 다르게 만들어야 한다는 것을 뒤늦게 깨닫고(ㅠㅠㅋ)

백엔드에서 token을 발급해주면 페이지상에(localStorage에!!) 계속 남아있는다는 개념이 잘 이해가 안가서 처음엔 왜???어떻게??!?그래서 코드 어떻게 쳐야되냐고???ㅠ?를 외치고 다녔다.

처음 만든 페이지의 nav 상태. 로그인 따윈 없다 연결도 없다

만들고 보니 그냥 말 그대로였고...token은 그냥 남아있다 localStorage에..

한 번 저장되면 지울 때까지 함께한다...🌟

0. 토큰은 어떻게 받는가????

로그인 페이지에서 로그인에 성공했다면 이미 토큰은 localStorage에 저장돼있을 것이다. 왜냐면 로그인 기능을 담당한 멋진 분께서 이런 코드로 토큰을 저장을 해주셨을 것이기 때문에...

if(result.MESSAGE === "REGISTER_SUCCESS") {
  localStorage.setItem (“access_token”, result.Authorization);
  this.props.history.push('/main');}

• 로그인에 성공하면 local storage에 “access_token”을 “key” 값으로 result.Authorization 를 value 값으로 저장한다는 뜻이다.
• key 이름은 정하기 나름이다. 그냥 token으로 해도 되고...그치만 백엔드랑 꼭꼭꼭 상의해서 맞추자. 더이상의 key error 노우..

1. 로그인/로그아웃 상태에 따른 nav bar 만들기

'localStorage에 access_token이 있다면'이라는 조건으로 삼항연산자를 만들고

logOutBox는 로그아웃 상태일 때는 display: none, 로그인 상태일 때 display: block으로 만들었다.

2. 로그아웃 시키기

로그아웃 버튼을 누르만 handlelogOut 함수를 실행한다.
localStorage에서 access_token과 name, email을 제거하고 main 페이지로 가게 하는 함수다.

localStorage의 아이템 불러오기/제거하기

불러오기

localStorage.getItem("key이름") 
또는 
localStorage.key이름 

제거하기

localStorage.removeItem("`key이름`")