20230323_TIL
오늘 한 일(회고)
- 프로젝트 페이지 연결 및 에러 해결
오늘도 에러문제를 해결하려고 한다. 어제 새벽 5시까지 하다가 잠들었다. 문제는 바로 accessToken 때문이였는데… 일단 해결이 되었다. 나는 이 토큰이라는 것을 서버에서만 구현하는 줄 알았다.
원래 내 생각 프론트 로그인 시 -> 서버에서 accessToken 및 refreshToken 발급 하고 -> 이것을 쿠키 헤더에 저장 -> 그리고 accessToken 만료 후 (시간이 지나면) 서버에서 DB에 저장된 refreshToken을 찾아서 있으면 accessToken 재발급, 또는 refreshToken 없으면 로그인 다시 하라고 에러메세지 보내기.
이런식으로 생각을 했는데 이게 아닌 것 같다. 프론트에서 또 에러들을 해결 해야하는 것 같은데… 프론트에서 무슨 처리를 해야할지 팀원들과 계속해서 고민을 했다.
그냥 튜터님이 말한거 막 적은 노트장
어떤 api를 분리하는게 가장 좋음
hospitals/{id} {auth}
- 토큰 만료를 해결하는 넣어야 하는 것,
- html에다가 토큰만료 해결하는걸 넣는게 어떨지? 아니면 아예 header.ejs 거기다가 settimeout을 넣기??? 프론트에서 주기적으로 토큰 재발급 api 부르기 나머지는 다 지우기…
이미 토큰이 만료된 것 -> redirect -> hospitals/detail/{id}
- 토큰 만료
=> 이건 안쓴다고 가정 -> a href = 페이지 이동
토큰 발급 api를 넣는거나 window.location = 페이지 이동 페이지 넘어 갈 때 auth는 아닌 것 같다….. 30초 토큰 만료로 넘어가니깐… 페이지 넘겨주는 것은 auth를 넣지말자… 야매 방법 => 주기적으로 api 토큰 발급 …. 아름답지 못함
희찬님 의견…
로그아웃 하면 accessToken 없어지고, refreshToken만 있을 때 만료가 아니라 삭제가 된 상태된 상태이니깐 그 때는 타이머가 멈추게 하고, 둘 다 존재하고 만료가 안되었다.? 그러면 타이머가 돌게…. settimeout이 아니라 setime interval을 쓰면 될듯/?? 토큰 만료시간을 조금 길게 해야함. 10분 15분 정도..? 원래 accessToken 10분~15분, 12분 간격으로 계속 리프레쉬는..? 하루 이틀 로그인 안하면 풀리게… 리프레쉬 토큰 없으면 다시 로그인 되게… 리다이렉트로 시키기… 프론트에서 리프뤠시 토큰 만료가 되었다? 바로 로그인 화면으로 가게… 있으면? 그걸로 accessToken 발급 받게..
pc방 프로젝트.. 로그인 하고 결제를 하고 시간초가 도는데 돌다가 로그아웃하면 그 시간 저장해야하는데 db에 시간 정보가 저장되었는데 이것도 똑같은 방식으로 해야하나?
=> 시간은 따로 저장 안해도될듯 이미 리프뤠시 토큰 있으니 깐…
질문2 validation 발급시간, 아이디 값, 만료시간이 나오는데 이게 그건가요? = 답2 못쓰는 토큰이라고 에러.
인터넷에서 시간 보는법이 2가지 타임스태프 방법 8자리 정도 나오는데 변환하면 나옴… 이 숫자가 초가 기준인 것 같은데, 1980몇년을 기준으로 초를 count 한 거…
질문3 10s 를 어세스토큰 만료라고 했을 때 로그인하면 10초 지나는데 만료되기 전에 재발급을 한다고 할 때 7초를 인터벌 걸었다. 하면 5초 지났는데 이 사람이 로그아웃 때리면 인터벌은 계속 가지 않나? 답3 리프레쉬 어세스 토큰을 지워버리면 되지 않을까? 애초에 리프뤠시 토큰을 가지고 응답하는 거니깐 상관없지 않을까? 라는 생각…
추가질문3 원래 로그아웃 하면 리프레시 지워주나? 2개다 지워준다.
브라우저 내에 쿠키에서만 지워주는 것… db에는 더 이상 필요없다… 근데 db에 낭비이기 때문에 주기적으로 실행되는 스크립트들 토큰이 만료가 된 리프뤠시 토큰들은 서버단에서 지워주는 로직을 짤 수 있음. (크롬잡, 노드잡, 스케줄 워크) 그런 라이브러리가 있다.
좀 더 응용하면 db에 어떤 시간이 딱 주기적으로 메일을 쏴주는??? 그런것도 있다. db에 리프레쉬 토큰을 안지운다.. 사용자가 로그인한 기록이기 때문에… 안 지우는게 맞지 않을까?? 추적을 하면 안 지우는게 맞다.
개발에서는 기다 아니다 그런게 없음. 사용에 맞게 사용하는 것. 주니어일 때는 다 그렇게 생각했는데 요새 일 하다보니 필요없다…
결론
일단 오늘 토큰 재발급을 일단 야매로 header.ejs에 넣고 Timeset을 해버렸다.
function getCookie(name) {
var nameOfCookie = name + '=';
var x = 0;
while (x <= document.cookie.length) {
var y = x + nameOfCookie.length;
if (document.cookie.substring(x, y) == nameOfCookie) {
if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
endOfCookie = document.cookie.length;
return unescape(document.cookie.substring(y, endOfCookie));
}
x = document.cookie.indexOf(' ', x) + 1;
if (x == 0) break;
}
return '';
}
const whenExpiredToken = function () {
console.log('whenExpiredToken 함수 실행');
const refreshToken = getCookie('refreshToken');
if (refreshToken === '' || refreshToken === undefined) {
return;
}
$.ajax({
type: 'GET',
url: `/api/token`,
headers: { 'X-Refresh-Token': refreshToken },
dataType: 'json',
success: function (response) {
console.log(response);
if (response) {
setTimeout(() => {
console.log('7초 타이머 시작');
whenExpiredToken();
console.log('7초 후 setTimeout 함수 내에 whenExpiredToken 함수 실행');
}, 7000);
}
// while (document.cookie.length !== 0) {
// }
const newAccessToken = response.newAccessToken;
console.log('newAccessToken: ', newAccessToken);
$.ajaxSetup({ headers: { Authorization: 'Bearer ' + newAccessToken } });
// 로그인 안했을 때
// 로그인 했을 때
// 로그인 중에 재발급 받았을 때
// const accessToken = document.cookie.split(';')[0].split('=')[1]
// const refreshToken = document.cookie.split(';')[1].split('=')[1]
},
error: function (error) {
console.log('error.responseJSON.message', error.responseJSON);
},
});
};
whenExpiredToken();
// 응답이 null 이면 그다음 코드가 실행이 안되게 하면 될거같다~
// 만약 있으면 (로그인 됬다는거)셋타임 시작 그 셋타임 안에 whenExpiredToken()
// setTimeout() 7초를 걸었으면 7초 뒤에 이 안에 있는 콜백함수가 실행 whenExpiredToken()
이게 프론트에서 돌아가는 코드이다. 무한 발급….ㅋㅋㅋㅋㅋㅋㅋ 그런데 배포서버에서 안돌아가서 내일 다시 해봐야 할듯 하다.
내일 할일
- 프로젝트 마무리 작업