[React] JWT 이해하기

JWT 

JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰이다.

 

로그인 이후 서버가 만들어주는 문자열이다.

이 문자열에는 사용자의 로그인 정보가 들어있고, 해당 정보가 서버에서 발급되었음을 증명하는 서명이 들어있다.

 

사용자가 로그인을 하면 서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해주고,

추후 사용자가 다른 API를 요청할 때 발급받은 토큰과 함께 요청하게 된다.

그럼 서버는 해당 토큰이 유효한지 검사하고, 결과에 따라 작업을 처리하고 응답한다.

 

모든 API에 토큰을 넣는다는 것이 아니라 본인임을 증명해야하는 API들에 토큰을 넣어 통신해야 한다.

예시) 내 정보 수정, 장바구니 조회 등

const headers = {
    accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Access-Token': 'jwt 토큰',
}

Axios.get(url, {headers: headers})

 

JWT 저장

서버에서 받은 JWT를 로컬에 저장해놨다가 

JWT가 필요한 API 통신시에 넣어서 통신해야한다.

// 로그인 후 JWT localStorage에 저장하기
axios.post('/login', data).then(res => {
    const token = res.data.token;
    localStorage.setItem('jwtToken', token);
});

// localStorage에 저장된 JWT 불러와서 헤더에 넣기
const headers = {
    accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Access-Token': localStorage.getItem('jwtToken'),
}
// 해당 헤더로 통신하기
Axios.get(url, {headers: headers})