오늘은 1차 제출일
사실 세션 코드가 짧아서 세션으로 진행되는 코드로 제출했다가 뒤늦게 jwt와 access, refresh token을 사용하는 코드를 짰다. 오늘은 그 코드 짜던 중 마주한 에러들을 정리하려고 한다.
🥔 Bearer 형식이 아닙니다
const tokenStorages = {};
// Access Token을 생성하는 함수
function createAccessToken(id) {
const accessToken = jwt.sign(
{ userId: id },
'custome-secret-key',
{ expiresIn: '12h' }, // Access Token이 12시간 뒤에 만료되도록 설정합니다.
);
return accessToken;
}
//Refresh Token을 생성하는 함수
function createRefreshToken(id) {
const refreshToken = jwt.sign(
{ userId: id },
'custome-secret-key',
{ expiresIn: '7d' }, // Refresh Token이 7일 뒤에 만료되도록 설정합니다.
);
return refreshToken;
}token을 정리하는 tokenStorage를 생성하고 createAccessToken과 createRefreshToken 함수를 로그인 API 안에 작성하였다.
const accessToken = createAccessToken(user.userId);
const refreshToken = createRefreshToken(user.userId);
tokenStorages[refreshToken] = {
id: user.userId,
ip: req.ip,
userAgent: req.headers['user-agent'],
}
/*개발자도구나 insomnia 쿠키에서 확인할 수 있다.*/
res.cookie('accessToken', `Bearer ${accessToken}`);
res.cookie('refreshToken', `Bearer ${refreshToken}`);이 때 cookie로 넘겨주는 형식을 잘 기억해야한다... 난 그러지 못했음 😢
처음에는 위의 accessToken과 refreshToken을 authentication (강의에서 사용한 변수명)으로 두었다가 auth.middleware.js에서 변수명을 authentication으로 두는 바람에 미들웨어가 계속해서 유저 한명만 조회하는 결과를 가져왔다. 아무리 다른 아이디로 로그인을 해도 계속해서 6번 유저만 조회되던 상황.
🍎 해결 방법
맨 첫줄 쿠키에서 가져오는 토큰을 accessToken으로 변경.
그랬더니 Bearer 형식이 아니라는 메시지가 떴다.
-> 다시 로그인 API의 res.cookie에서 그냥
res.cookie('accessToken', accessToken);
res.cookie('refreshToken', refreshToken);으로 했던 것을
res.cookie('accessToken', `Bearer ${accessToken}`);
res.cookie('refreshToken', `Bearer ${refreshToken}`);Bearer을 추가해서 수정했다.
이 수정을 끝내고 마주한 건...
🥔 토큰이 조작되었습니다
난생 처음 보는 JsonWebTokenError였다. 아니 내 서버에 내가 테스트하는데 뭔 토큰이 조작돼!!!! 했지만 아무튼 내가 고쳐야하는 에러인 것...
🍎 해결방법
try catch로 잡은 에러이기 때문에 분명 try 부분의 메서드가 안되어서 튕겨 나온것이다... 하고 보았더니 두 가지 메서드가 있었다. 하나는 jwt.verify, 다른 하나는 prisma.users.findFirst
findFirst야 이력서 작성 때 주구장창 썼던 것이니 문제는 jwt.verify였을 것이라 생각하며 코드를 다시 보았다.
const decodedToken = jwt.verify(token, 'custome-secret-key');
const userId = decodedToken.userId;그리고 당시 로그인 API에 있던 access, refresh token을 생성하는 함수
function createAccessToken(id) {
const accessToken = jwt.sign(
{ userId: id },
{ expiresIn: '12h' }, // Access Token이 12시간 뒤에 만료되도록 설정합니다.
);
return accessToken;
}
function createRefreshToken(id) {
const refreshToken = jwt.sign(
{ userId: id },
{ expiresIn: '7d' }, // Refresh Token이 7일 뒤에 만료되도록 설정합니다.
);
return refreshToken;
}그렇다. 'custom-secret-key'를 빼먹고 jwt.sign을 해버린 것. 부랴부랴 'custom-secret-key'를 넣고 다시 진행했더니 미들웨어의 에러도 잘 고쳐지고 next함수도 잘 진행되었다.
.
.
.
.
const {userId} = req.session;__
if(!userId) throw new Error('로그인이 필요합니다.');
session으로 하면 두 줄만 쓰면 됐는데 🫥...
🥔 모든 이력서 조회 수정
이 부분은 피드백을 받아 가장 먼저 수정한 부분이다.
req.query 안쓰고 req.params만 남발한 자의 최후 ^^...
const orderKey = req.query.orderKey ?? 'userId';
const orderValue1 = req.query.orderValue ?? 'desc';이렇게 수정했다고 합니다.
그런데 문제는 값자기 아래 prisma.resumes.findMany에서 where절을 못 쓰는 것... 해설 영상에서 where절을 안쓰길래 뺐더니 다시 작동은 잘한다. 사실 로그인한 회원의 모든 이력서들을 보게 하는 것인 줄 알았는데 얼떨결에 모든 회원들의 이력서를 보게 되었다. 이게 과제가 원하던 것이었을까...?
➕ 추가로 지난 개인과제 때 하지 못했던 pm2를 이번 과제에 진행했다. 당시 우분투가 어려워서 제꼈더니 서버가 그렇게 바로 꺼질 줄 몰랐쥬...
암튼 우분투 사용한 부분도 다시 정리!
🍎 env 파일 작성하기
- git clone으로 불러올 때 .env가 같이 오지 않으므로 직접 .env를 설정해야한다. 이때 조심해야할게 git clone으로 받아온 파일로 이동을 하고! 그리고 우분투에는 입력창 모드와 명령어 모드가 있다는 것을 알아야한다는 점이다. i로 입력창으로 전환하여 env 내용물을 복붙하고, esc로 명령어 모드로 전환 후 :wq를 작성하고 엔터를 쳐야지 실행이 된다는 것... 이 것을 몰라서 .env.swp 파일만 서너개 만들고 지우기를 반복했다...
🍎 pm2 진행하기
- 사실 쉬운 부분이었다. sudo -s로 관리자 권한으로 전환하고, yarn global add pm2를 한 후 pm2 start app.js를 하면 끝!
우분투 창을 닫아도 서버가 진행되는 모습을 확인하면 진짜 끝!이었다.
