email,password 를 입력 ->
서버로 eamil,password 데이터를 담아 post요청 ->
서버에서 데이터 확인 인증후 응답 ->
응답으로accesstoken
을 받는다.
유저는 받은accesstoken
으로 마이페이지,등 서비스이용할때 서버로 token과 같이 요청을 보내 서비스를 사용!
일반적인 로그인 과정은 이렇다.
여기서 로그인 유지 체크를 하였을시에 대한 분기를 나누는것도 고려해서 만들면 된다.
우선 내가 사용한 방법은 브라우저 메모리 저장객체인 localStorage
, sessionStorage
을 사용하였다.
localStorage에 저장된 값은 브라우저를 껏다 켜도 지워지지않는다. -> 강제로 지워야함 (removeItem('지울 key'))
다르게 sessionStorage는 브라우저를 끄면 저장된 값이 사라진다.
위의 저장객체만의 특성을 고려하여
로그인유지 체크를 하였을때 localStorage
에 token
을 저장하여 브라우저를 껏다 켜도 저장된 token이 남게하여 다시 로그인할 필요없이 token
으로 서비스를 바로 이용할 수 있게 만들것이고,
로그인유지 체크를 하지않고 로그인 하였을때에는 sessionStorage
에 token
을 저장하여 브라우저가 꺼지면 저장된 token
이 사라지게하여 다시 로그인을 해야하게끔 만들것이다.
localStorage.setItem('key',token)
sessionStorage.setItem('key', token)
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
const LoginBtn = () => { // 로그인 버튼을 눌렀을때 handler
const navigate = useNavigate();
const data = {email: 'hyo@naver.com', password: '1234567!!'};
axios.post('api', data, {
headers: {
'Access-Control-Allow-Origin': '*',
// cors error를 막기위한 옵션
}
})
.then((res) => {
const access_token = res.headers.accesstoken.split(' ')[1];
// 서버쪽에서 엑세스토큰을 응답headers에 accesstoken이라는 키값에 넣어 줬다면 이렇게 쓴다.
// 그리고 뒤에 split(' ')[1] 을 붙인 이유는 토큰이 올때 'Bearer 토큰~~~~' 이런식으로 오기 때문에 나는 받아서 저장할때 Bearer을 빼주었다.
const refresh_token = res.headers.refreshtoken;
if(checked){ // 로그인유지 체크가 되었을때!
localStorage.setItem('access_token', access_token);
localStorage.setItem('refresh_token', refresh_token);
// 엑세스토큰이 만료되었을때 refresh_token을 서버로 보내면 엑세스토큰을 재갱신 할 수 있으므로
//로그인 유지 체크를 하였을땐 보다 길게 로그인을 유지할 수 있도록 refresh_token도 저장해두었다.
}
else { // 로그인유지 체크가 되어있지 않을때!
sessionStorage.setItem('access_token', access_token);
}
})
navigate('/')
// 로그인에 성공하면 path가 '/' 인 페이지로 redirect를 시켜준다.
}
위와 같이 로직을 구성하면 로그인에 성공하였을시
로그인 유지 체크를 하였을때 브라우저를 껏다켜도localStorage
가 accesstoken
을 가지고 있으므로 그 token을 로그인이 필요한 요청 페이지마다 보내주어 로그인이 필요한 페이지를 이용할 수 있게된다.
클라이언트에서 만료된
accesstoken
으로 서버로 요청을 보낼시
서버는 만료되었다는 어떤 응답을 보내어 클라이언트에서refreshtoken
을 받아 인증된refreshtoken
인지 확인후 새로운accesstoken
을 다시 클라이언트에게 보내준다.
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const LogoutBtn = () => {
sessionStorage.removeItem('accesstoken');
localStorage.removeItem('accesstoken');
localStorage.removeItem('refreshtoken');
navigate('/')
}