[Vue.js] 토큰 기반 인증(#1. 인증소개)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리)

2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃)

2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인)

2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록)

2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기)

2020/07/24 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#1. 인증소개)

[Vue.js] 토큰 기반 인증(#1. 인증소개)

이 시리즈는 vuemastery 에서 들은 강의 토대로 복습 겸 정리하는 포스팅입니다.
7개의 시리즈물로 포스팅 될 예정이며, 이 포스팅은 첫번째입니다.

인증이란?

• 모든 사람이 모든 곳을 자유롭게 접근할 수 있다.
• 특정 사람들만 접근을 원하면 특정 사람들에 대한 인증이 필요하다.
• 계정을 만들고, 계정을 로그인하고 나서 접근이 가능하다.
• Vue.js와 JWT(JSON Web Tokens)을 사용해보자.

토큰 기반 인증 작동 방법 알아보기

• 토큰 기반 인증은 앱에서 사용자가 로그인 할 수 있는것을 의미한다.

• 아무나 로그인 할 수 없으므로 유저네임, 비밀번호를 입력 후 서버로 보내고 서버에서 인증 할 수 있다.

• 모든것이 완벽하게 동작된다면 유저는 로그인을 할 수 있고 서버에서는 토큰(token)을 알려준다.

• 토큰을 로컬스토리지(localStorge)에 저장 후 필요할때마다 사용한다.

  • 예를 들면 개인자료 API를 호출할때, 로컬스토리지(localStorge)에 있는 토큰을 복사하고 복사본을 API 요청을 위해 보낸다.
  • 서버는 토큰을 복호화(decrypts)하고 이 토큰이 요청된 자료에 접근권한이 있는지 확인한다.
  • 권한이 있으면 요청한 자료를 클라이언트에게 보내준다.

• 유져가 로그아웃할때 로컬스토리지에 있는 토큰도 삭제된다.
• 토큰 자동 만료 기간을 설정하여 자동으로 삭제도 가능하다.

JWT를 알아보자.

• JWT는 열쇠(KEY)라고 생각하면 쉽다.(열쇠를 이용해 잠금을 풀고 개인적인 정보를 볼 수 있다.)
• JWT의 구조는 the header, payload, signature 암호화된 문자 3개로 구성되었다.
  • ex) xxxxx.yyyyy.zzzzz

• header는 토큰의 타입이다.(여기서는 JWT) 그리고 해싱 알고리즘(hashing algorithm)
• payload는 우리가 보낸 정보이다.(여기서는 user에 대한 정보), 토큰을 발행한 사람, 만료 날짜, 유져가 관리자인지 등 옵션 claims와 같은것들
  • Payload 부분에는 토큰에 담을 정보가 들어있습니다. 여기에 담는 정보의 한 ‘조각’ 을 클레임(claim) 이라고 부르고, 이는 name / value 의 한 쌍으로 이뤄져있습니다. 토큰에는 여러개의 클레임 들을 넣을 수 있습니다.

-signature는 the header+the payload+the secret를 합친 해시이다. secret은 서버에 있고 토큰을 복호화할때 사용된다. 그리고 새로운 토큰을 sign하는데 사용된다.

• 참고 : https://jwt.io/introduction/

어떻게 JWT 사용하는 예제를 만들어 볼까?

• Vue.js, JWT를 이용해 로그인 후 접근이 가능한 dashboard를 만든다.
• dashboard가 불러와질때 개인자료를 JWT Token을 포함한 API 호출하여 요청한다.
• 로그아웃시에는 로컬스토리지 삭제!

다음 장에서는 프로젝트 구조에 살피면서 코드를 작성할 예정이다.