Vue.js 환경에서 JWT토큰으로 로그인 기능 구현하기
1) 작업내용
개인 홈페이지를 제작하면서 가장 기본적인 기능인 로그인 및 회원가입 기능을 구현하려 합니다.
이 과정에서는 사용자의 로그인 요청을 처리하고, JSON Web Token(JWT)을 사용하여 인증을 관리할 것입니다.
우선, 내 정보 페이지에서 로그인 페이지로 이동하는 처리를 구현합니다.
로그인 페이지는 이미 잘 만들어진 HTML 템플릿을 사용하여 로그인 페이지를 구성하였습니다.
먼저 회원가입 기능을 구현하겠습니다.
회원가입 시 비밀번호는 bcrypt를 이용하여 암호화하여 저장합니다 (bcrypt 대해서는 다음 포스팅에 다루겠습니다).
회원가입 페이지
로그인페이지
2) 로그인 처리 작업
로그인 처리 시 해야 할 작업은 다음과 같습니다.
- 유효성 검사 (validate)
- 데이터베이스에서 ID 및 비밀번호 확인
- 데이터가 일치하면 JWT 토큰 생성 (토큰 만료 시간 설정)
- 생성된 토큰을 웹 스토리지에 저장
- 스토리지에서 토큰을 확인한 후 성공 메시지 반환
- 데이터가 일치하지 않으면 로그인 실패 처리
다음은 JWT를 사용한 예제 소스코드입니다.
3) 적용소스
위 코드에서 bcrypt를 사용하여 데이터베이스에 저장된 암호화된 비밀번호와 사용자가 입력한 비밀번호를 비교합니다. 비밀번호가 일치하면 JWT 토큰을 생성하여 반환합니다.
토큰 만료는 9시간으로 설정하였습니다.
다음으로, 서버에서 로그인 요청을 처리하는 라우트를 설정합니다.
사용자 인증이 성공하면 JWT 토큰을 생성하고 이를 클라이언트에 반환합니다.
JWT 토큰 생성 시에는 비밀 키를 사용하며, 이는 환경 변수 파일 (.env)에 저장하여 노출되지 않도록 합니다.
우선, 필요한 패키지를 설치합니다.
>> npm install jsonwebtoken
로그인 성공 후
위와 같이 처리 시 token값이 생성되는데, 토큰을 로컬 스토리지에 저장하고, 이후 인증이 필요한 요청 시 토큰을 헤더에 포함하여 서버로 전송합니다.
마치며
이와 같이 JWT 토큰을 사용하여 Vue.js 애플리케이션에서 로그인 기능을 구현할 수 있습니다.
이 과정은 사용자의 로그인 상태를 안전하게 관리하고, 인증이 필요한 다양한 기능을 구현하는 데 유용합니다.
궁금한 점이 있으면 댓글로 남겨주세요.
읽어주셔서 감사합니다. 😊