[TIL] 11.05 client 사용자 인증

오늘 한일

로그인/ 로그아웃/ 회원가입 API 들을 연결 시켜 주었다. 

 

로그인 부분에서 많은 시간을 보내었다. 각 페이지 마다 로그인이 되면 해당 유저의 이름을 보여주려고 했다. 그래서 App.js 에서 값을 내려주는게 좋다고 생각하여 App.js 에서 login 함수를 만들어 내려주었다. 하지만 email을 작성할때 계속 페이지가 새로 render가 됐다. App.js 의 state 값이 변하는 것 이기 때문에 App.js 자체가 render가 되면서 페이지가 계속해서 render가 되어 버리는것 같았다. 

 

그래서 token 을 사용하기로 하였다. singin.js 에서 로그인을 하고 받은 token로 App.js에서  해당 유저의 name 값을 받아와 뿌려주는 방법을 사용해보기로 하였다.

그런데 이 token을 sessionStorage, localStorage  둘 중 어디에 저장하는게 좋을까에 대한 고민이 생겼다. 

 

sessionStorage

세션이 끝나거나 브라우저가 종료 되면 세션은 사라진다. 도메인 마다 별도로 세션 스토리지가 생성 된다.

 

localStorage

직접 지우지 않는이상 사라지지 않고 도메인 마다 별도로 로컬 스토리지가 생성된다. 

 

session,local 공통 메소드

 

• setItem(키, 값) : 저장 (이미있으면 update)
• getItem(키) : 조회
• removeItem(키) : 삭제
• clear() : 전체 삭제
• key(n) : n번째 키의 이름 반환 (0부터 시작)

데이터가 영구적으로 보관 되는 로컬 보다는 페이지가 닫히면 세션이 사라지는 세션이 더 보안이 좋다고 생각하여 세션을 선택 하였다.

(좀 더 검색을 해 보았는데 로컬에 저장을 해두면 우리가 한번 로그인을 하고 껏다 켜도 계속 로그인이 되어 잇는 경우는 로컬 스토리지르 이용한 것이라고 한다.)

 

cookie는 서버와 클라이언트 둘다 접근이 가능해서 보안이 취약할거라 생각해서 아예 제외를 시켰는데 http only 설정을 통해 보안을 높일수 있다고 한다. 

 

cookie http-only 참고 블로그: https://lazyhoneyant.tistory.com/7

 

redirect 사용법

Redirect 를 import 한다.

import { Redirect } from 'react-router-dom'

 

this.state.success는 회원가입이 성공하면 true 실패하면 false가 된다. 이 true&false값을 이용하여 Redirect를 걸어준다.

 render() {
    return (
      <div>
        {
          this.state.success && <Redirect to="/"/>
        }
    </div>
    )
  }