로그인 (3) 썸네일형 리스트형 [전공자들 11] 로그인 상태관리(useContext) 아이디와 비밀번호를 받아 서버에서 사용자 검증을 한 후 토큰을 발급받는 기능은 완성을 했다. 이제 프론트에서 어디에 저장할 지, 어떻게 로그인 상태를 관리할 지 고민을 해야 했다. 발급받은 토큰을 프론트에 저장하는 방법으로는 로컬 스토리지와 쿠키 중에서 고민을 하다가 로컬 스토리지에 저장을 했다. 하지만 생각을 해보면 쿠키는 데이터가 영구저장되지 않기 때문에 만료일을 설정하거나, 설정하지 않는다면 세션처럼 브라우저가 종료되면 데이터가 지워진다. 반면 로컬스토리지는 직접 지우지 않는 한 영구적으로 저장되므로, 로그아웃 버튼을 누르지 않고 그냥 브라우저를 종료시킨다면 계속해서 로그인 상태가 남아있지 않을까 하는 생각이 들었다. 그래서 먼저 프로젝트를 완성을 시킨 후, 리팩토링하는 시점에서 토큰을 쿠키에 저장.. [전공자들 10] JWT 이해하기(로그인, 토큰발급, 요청보내기) 목차 1. JWT 기본구조 2. 로그인요청 후 토큰발급까지의 흐름 3. 발급된 토큰으로 요청을 전송하고 처리하는 흐름 1. JWT 기본구조 xxxxxxxxx.xxxxxxxxxxx.xxxxxxxxxx JWT는 '.'으로 나뉘어진 세 개의 부분으로 구성된다 왼쪽부터 각각 헤더,페이로드, 서명이라고 함 - 헤더 : 토큰의 종류("JWT"), 암호화 방식(어떤 알고리즘을 사용해 서명을 암호화했는지) 등을 담음 - 페이로드 : 사용자 정보(계정, 역할 등) 및 토큰 설정 정보(유효기간 등) - 서명 : 헤더와 페이로드를 조합한 내용을 담음 JWT요약정리 헤더와 페이로드는 단순 인코딩만 되어있기 때문에 탈취하여 내용을 열어보고 조작하기가 쉬움 그래서 서버만 가지고 있는 시크릿 키를 사용해 헤더와 페이로드의 내용을 .. [전공자들 8] 7일차 - 로그인 /회원가입/비밀번호 재설정 화면 메인 페이지들을 끝내고 드디어 비중낮은 로그인/회원가입/비밀번호 재설정 페이지만 남아서 쉽게 생각했는데 막상 시작해보니 절대 쉽지않았다.. UI 구성은 심플하게 빨리 끝냈는데 여러 조건설정때문에 애를 먹었다. 특히 회원가입 화면에서는 이메일과 비밀번호에는 각각 형식 검증을, 이메일형식이 맞았을 때 인증번호 화면 출력과 인증번호가 맞았는지 검증, 그리고 비밀번호도 사용자 경험을 위해 비밀번호 재입력하는 과정을 거쳐야 하다보니 코드가 복잡해지고 많은 변수가 필요해졌다. 단계별 진행이 아니라 한 화면에 모든 입력을 받고 뭔가 실시간으로 즉시 체크되는 것처럼 화면을 만들고 싶어서 더 복잡해졌던 것 같다. 게다가 혹시나 인증을 받고 이메일을 수정하면 어떻게 되는거지? 비밀번호 재입력을 통과한 다음 원래 비밀번호를.. 이전 1 다음
