Node & React basic #8

Jay·2023년 5월 12일
0

Node & React basic

목록 보기
8/21
post-thumbnail

오늘이야말로 토큰 생성을 해보자.

토큰 생성

토큰 생성을 위해 JsonWebToken이라는 라이브러리를 다운로드해야 한다.
npm i jsonwebtoken --save
JsonWebToken 문서

var jwt = require('jsonwebtoken');
var token = jwt.sign({ foo: 'bar' }, 'shhhhh');

이와 같이 사용하라고 적혀있음
유저 스키마에 토큰생성 메서드를 만들어주러 가자.

userSchema.methods.generateToken = function(cb){
	...
}

인자 하나만 넘겨주는 function을 만들 것이다.
위에 적은 jsonwebtoken 사용법대로 jwt를 선언해준 후,

userSchema.methods.generateToken = function(cb){
	let user = this;
  	// jsonwebtoken이용해서 token생성하기
  	let token = jwt.sign(user._id, "secretToken");
}

이와 같이 작성해준다.
여기서 user._id는 뭐냐면 mongoDB의 이 부분이다.

그리고 user._idsecretToken을 합쳐서 토큰을 만들어준다는 것임
그럼 나중에 토큰을 해석할 때 secretToken을 넣으면 user._id가 나오는 구조인거임

그리고 userSchema에 token부분을 만들어 두었으니

생성된 토큰을 여기에 넣어주고, 세이브

userSchema.methods.generateToken = function(cb){
	let user = this;
  	// jsonwebtoken이용해서 token생성하기
  	let token = twt.sign(user._id, "secretToken");
  	user.token = token;
  	user.save(function(err, user) {
    	if(err) return cb(err);
     	cb(null, user);
    })
}

그러면 generateToken함수에서는 이 결괏값을 받아서, err일 때는

user.generateToken((err, user) => {
  if(err) return res.status(400).send(err);
});

status400과 함께 err를 보내주고,
이것이 성공했을 때는 토큰을 저장해야 하는데,
쿠키, 로컬스토리지, 세션 등의 선택지 중 우리는 쿠키에 저장할 것이다.
이를 위해서 body-parser를 깔았던 것처럼 cookie-parser도 install해준다.
npm i cookie-parser --save
설치하고 나면 const cookieParser = require('cookie-parser')로 cookieparser를 가져온다음, app.use(cookieParser());로 사용할 준비!

오류 해결

그래서 이제 index.jsapp.post("/login", ...)에 generateToken 함수를 작성했는데, 자꾸 오류가 뜨는 것이었다.
첫번째 오류는 expected to be a plain object여서, 유저스키마에서 token변수 저장하는 부분의 jwt.sign(user._id, "secretToken")jwt.sign(user._id.toHexString(), "secretToken")으로 바꿨음
그랬더니 두번째 오류가 떴는데 callback function에 대한 거였다.
그래서 유저스키마랑 index.js에서 둘 다 수정을 했다.

User.js

userSchema.methods.generateToken = function () {
  let user = this;
  // jsonwebtoken이용해 token생성하기
  let token = jwt.sign(user._id.toHexString(), "secretToken");
  user.token = token;
  return user.save().then((user) => user);
};

원래 콜백펑션을 넘겨준다고 되어있는데 그냥 성공했을 경우만 return을 하게 해주었고

index.js

user
  .generateToken()
  .then((user) => {
  res
    .cookie("x_auth", user.token)
    .status(200)
    .json({ loginSuccess: true, userId: user._id });
})
  .catch((err) => {
  return res.status(400).send(err);
});

에러가 나는 경우는 여기에서 catch하도록 했다.
원래 여기도 .then과 .catch 없이 썼었고
유저스키마에서 error와 user정보를 보내주면 generateToken에서 그걸 이용해서 if(err) res.status(400).send(err)이런 식으로 콜백을 해주는 거였다.

몽구스 쓰는 방식이 바뀌어서 이런 부분이 좀 헷갈린다. 강의가 옛날 강의라..
그래도 고쳐가며 쓰는 재미(?)가 있다.

어쨌든 처음엔 오류가 나서 당황했는데 이제 success가 뜨고, 쿠키에 토큰이 저장된다!

profile
ㄱ이 아닌 개발자가 되고 싶은 사람

0개의 댓글