[React] Section 22

인증 토큰의 원리

사용자가 유효한 자격 증명을 전송한 뒤 허가 토큰을 생성하지, 저장하지는 않는다.

토큰은 기본적으로 몇 가지 정보를 포함한다. 백엔드에서 이 토큰을 생성하고 그것을 다시 클라이언트에게 전송한다.

이 토큰의 특별한 점은 토큰을 생성한 백엔드만이 해당 토큰의 유효성을 확인하고 검증할 수 있다는 것이다.

백엔드만이 알 수 있는 개인키를 사용해 토큰을 생성했기 때문!

-> 백엔드에서 토큰을 생성하고 유효성 검증을 하며 프론트에서는 토큰을 저장하고 이후에 보낼 요청에 첨부하여 해당 토큰을 사용자의 로그인 여부를 판단하는 인디케이터로 사용해야 한다.

 

 

 

백엔드에서 받는 응답으로부터 토큰을 추출해서 저장해야 함

가장 간단한 방법은 local storage!

localStorage.setItem('token',token)

 

util 폴더에 auth.js

export function getAuthToken() {

const token = localStorage.getItem('token');

return token;
}

const response = await axios(`~`,{
method: ~,
headers: {
'Authorization':'Bearer '+token
}
});

토큰 만료 관리하기

localStorage.setItem('token',token);

const expiration = new Date();

expiration.setHours(expiration.getHours()+1);
// localStorage에 만료 날짜로 저장한다.
localStorage.setItem('expiration',expiration.toISOString());

// getAuthToken function을 업데이트!
getAuthToken() {
const token = localStorage.getItem('token');

if (!token) {
return;
}
const tokenDuration = getTokenDuration();

// 다른 컴포넌트에서 로그아웃을 트리거하는데에도 사용할 수 있다.
if (tokenDuration < 0) {
return 'Expired';
}
return token;
}
// 토큰의 잔여 유효 시간을 밀리초 단위로 가져온다.
export function getTokenDuration() {
const storedExpirationDate = localStorage.getItem('expiration');
const expirationDate = new Date(storedExpirationDate);
const now = new Date();
const duration = expirationDate.getTime() - now.getTime();
return duration;
}

// 다른 컴포넌트 예시
useEffect(()=> {
if (!token) {
return;
}
if (token === 'Expired') {
// 로그아웃 작업 트리거!
return;
}
const tokenDuration = getTokenDuration();
console.log(tokenDuration);

setTimeout(()=>{
//로그아웃 트리거!
},tokenDuration);
},[token]);

https://happppi.tistory.com/57

[React] 로그인 Refresh Token 처리

위 블로그가 쉽게 설명되어 있지만 이 방법은 안 쓸듯

 

로그인함 > 백엔드에서 token, refresh token을 줌 (만료시간도...)

> 프론트에서는 그것들을 localstorage에 저장함

 

 

 

https://thinkforthink.tistory.com/372

Axios를 이용해서 Access 토큰과 Refresh 토큰을 갱신하는 방법

이 블로그가 잘 설명되어 있다! (모르겟다...)

 

https://duckgugong.tistory.com/346

refresh token axios interceptor

이 블로그 로직이 제일 이해하기 좋은듯

 

1. token 이 유효한 경우 > 문제 없음 (만료 시간 계산해야 함)

2. token 이  유효하지 않은데 refresh token은 유효함 > axios의 경우 response interceptor를 설정함

refresh 토큰을 가지고 새로운 토큰과 refresh token을 발급받아서 새로 저장한다. 그리고 기존 request 다시 요청!

access token이 만료되었을 때 서버에서 401 에러를 준다 > intercept하여 refresh token 이용하여 토큰과 refresh token 재발급..?

3. token과 refresh token 둘 다 유효하지 않음 or 다른곳에서 로그인해서 토큰이 유효하지 않음 > 로그아웃 시키고 다시 로그인 하도록 함, 로그인 페이지로 리다이렉트

 

* 로그아웃 하였을 경우 token과 refresh token 둘다 만료시키기!

 

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-Access-Token-Refresh-Token-%EC%9B%90%EB%A6%AC-feat-JWT

🌐 Access Token & Refresh Token 원리

전체적인 로직 요약

 

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)

이 블로그 내용도 참고하기에 정말 좋다!