[FE/10] 로그인 기능 구현, 하나부터 열까지

[sieunnnn]

[sieunnnn]

1 주차 실습 : 기본적인 로그인 MockAPI 구현

구현 내용

• 로그인 리스폰스와 유저의 정보를 담을 인터페이스 생성
• 토큰을 직렬화 / 역직렬화 하는 함수 구현
• 이를 이용한 mockAPI 생성
  

로그인 폼 만들기

• mockAPI 를 이용하여 유저 정보를 알맞게 뿌리는지 확인
• 기본 폼이 너무 안이뻐서 부트스트랩 적용해보았습니다.

*️⃣ 유저 정보

username	password	name
sini1120	1234	sieun
sigi0721	1234	hongsik

결과

[sieunnnn]

1 주차 실습 : 로그인 기능 연결하기 (In memory)

API spec

• 로그인(POST)
  • URL: 'https://wanted-p2.bluestragglr.com/auth/login'
  • body: { username: string, password: string }
  • response: { access_token: string }
• 유저정보(GET)
  • URL: 'https://wanted-p2.bluestragglr.com/profile'
  • Header Authorization: Bearer ${ access_token }
  • response: { access_token: string }

실습내용

• API spec 에 명시되어 있는 것처럼 로그인에 성공하면 응답바디로 어세스 토큰을 받게 됩니다.

  

• getCurrentUserInfoWithToken 함수 만들기

  • 로그인에 성공하면 응답 바디로 받은 어세스 토큰을 파라미터로 사용합니다.

  • 유저정보 api 로 이 어세스토큰을 헤더에 위와 같은 형식으로 맞춰 넣어줍니다.

  • 서버에서 토큰이 유효하다고 판단되면 아래와 같이 유저정보를 응답으로 건내줍니다.

    

  • 이를 이용하여 유저 정보 상태를 업데이트 하고, 로그인 화면 아래에 출력합니다.

    

[sieunnnn]

1주차 실습 : 로그인 기능 연결하기 (Local Storage)

API spec

• 로그인(POST)
  • URL: 'https://wanted-p2.bluestragglr.com/auth/login'
  • body: { username: string, password: string }
  • response: { access_token: string }
• 유저정보(GET)
  • URL: 'https://wanted-p2.bluestragglr.com/profile'
  • Header Authorization: Bearer ${ access_token }
  • response: { access_token: string }

로컬스토리지에 토큰 저장하기

• 이전과 다르게 토큰을 특정 변수에 저장하는 것이 아닌, 로컬 스토리지에 저장해야 합니다.

• 강사님이 미리 짜놓으신 스켈레톤 코드와 주석으로 처리하신 todo 를 적절히 수행했고, 로그인 후 유저 정보를 로컬 스토리지에 저장하는것을 성공 하였습니다.

  

자동 로그인 구현하기

로그인 후 다른 페이지에서 로컬스토리지에 저장한 토큰을 이용하여 유저 정보를 받아오는 실습을 진행했습니다.

• 어세스 토큰을 로컬 스토리지에서 꺼내온 뒤, 이를 유저 정보를 요청할때 헤더에 같이 넣어줍니다.
• 서버는 헤더에서 이를 꺼내 검증을 하고, 유효한 토큰이면 알맞은 유저 정보를 응답으로 내려줍니다.