크래프톤정글 0주차 6; 로그아웃 기능 구현, nav바 유저 로그인 상태 동적 반영

서버에서 토큰이 유효한지 검증하기

왜?

로그인한 회원만 서비스하는 페이지를 볼 수 있게 하기 위함
로그인하지 않은 경우 로그인/회원가입 페이지만 볼 수 있고, 나머지 페이지를 볼 수 없어야 함

어떻게

로그인한 회원에게만 토큰을 주고, 페이지마다 방문자가 만료되지 않은 토큰, 유효한 토큰을 가지고 있는지 검증

• 서버에서
  • 토큰 검증 함수 정의
    • 토큰이 주어지면 토큰을 디코드함(jwt.decode()) 이 부분 자세히 이해 필요
      • 토큰이 만료된 경우, 유효하지 않은 경우(자체 jwt가 제공하는 함수 이용jwt.ExpiredSignatureError, jwt.InvalidTokenError)
        • 에러메시지
      • 토큰이 만료되지도 않고 유효한 경우
        • 토큰을 디코드한 값을 돌려줌(유저 아이디와 만료기간이 담겨 있음)

메인 페이지(‘나의 일기’)에서 토큰 검증 후 페이지 렌더링

왜?

로그인하지 않은 경우 로그인 화면을 보여주고, 로그인한 경우는 메인 페이지를 보여주어야 함.
로그인한 회원은 로그인 페이지를 다시 보면 안 됨

어떻게?

• 서버에서
  • 쿠키의 토큰을 가져온다
  • 토큰 검증 함수를 돌려서 유효하거나 만료인 경우
    • 로그인 페이지 렌더링
  • 아닌 경우
    • 메인 페이지 ‘오늘의 메모’ 렌더링

로그아웃 하기

출처: https://thalals.tistory.com/179

왜?

로그아웃 기능이 없으면 서버에서 지정한 쿠키 유효시간에 따라 24시간 동안, 유저가 스스로 쿠키를 삭제하지 않는 이상 로그인 상태가 유지됨 쿠키를 삭제하고 실험해볼 것! → 팀원이 실험해본바 잘 작동했다고 한다👍

어떻게?

JWT 방식은 서버에서 쿠키를 삭제할 수 없는 모양. → 근본적으로 토큰이 클라이언트에게 저장되어 있기 때문?
따라서 클라이언트에서 쿠키를 삭제하고, 서버에서 그것을 검증하는 방식

• 프론트에서
  • nav의 로그아웃 버튼에 로그아웃 함수 연결
  • 로그아웃 함수가 실행
    • 쿠키를 삭제

nav바 유저 상태 동적 반영

왜?

유저의 로그인/로그아웃 상태에 따라 nav바에 보이는 버튼이 달라야 함
ex. 로그인 상태인 경우 환영 메시지 + 로그아웃 버튼이 보여야 하고, 로그인 버튼은 없어야 함. 반대의 경우에는 로그인버튼과 회원가입 버튼이 보여야 함.

어떻게?

유저가 로그인했는지 확인하기 위해서는 유저의 브라우저에 저장된 쿠키안에 알맞은 토큰을 가지고 있는지 확인하면 됨

• 프론트에서
  • ajax로 api에 따라 서버에 요청(‘/login_check’)
    • 데이터 수송신에 성공하면(방문자가 유효한 토큰을 가지고 있는 경우)
      • 서버에서 받아온 응답값(방문자의 쿠키)에서 유저 이름을 알아냄
      • 'temp_html 변수 설정 + append’로 nav바에 user state를 반영
• 서버에서는
  • 클라이언트에서 로그인 상태 확인 요청을 받음
  • 유저의 토큰을 불러온 뒤
  • 토큰을 검증하고(기존에 작성한 토큰 검증 함수 사용)
  • 토큰의 상태가 만료되었거나 유효하지 않은 경우
    • 아무것도 반환되지 않음
  • 토큰이 정상인 경우
    • 토큰에 담겨있는 아이디(=이름)을 돌려줌 (이 이름은 환영 메시지에 표시됨)