본문 바로가기

TIL

2021.04.06(insomnia token전달 이해)

insomnia를 활용할 때 회원가입을 하고 Login을 해서 로그인한 것을 어떻게 보여줄 수 있을 지 정리를 해봤습니다. 

		await User.create({
			id : sanitizeHtml(id),
			password: bcrypt.hashSync(password, 10),
			nickname : sanitizeHtml(nickname),
			area : sanitizeHtml(area)
		});

signUp 즉 회원가입을 진행하기 위해 post를 요청할 때 ajax에서 data를 받아야할 부분이 id, password, nickname, area인데 추가적으로 confirmPassword를 진행한 이유는 

const { idpasswordconfirmPasswordnicknamearea } = req.body;

별도로 confirmPassword를 받아서 password하고 비교해서 동일할 때 진행될 수 있게 만들기 위함입니다. 그리고 header 부분은 Content-type application/json을 설정해서 json형식이 server에 잘전달될 수 있게 설정합니다. 

 

login을 할 때에는 id랑 password만 입력하면 

        if(user) {
            await bcrypt.compare(password, user.password, (err, match) => {

                if(match){
                    const token = jwt.sign({ userId : user.userId }, process.env.SECRET_KEY );
                    res.json({ msg : 'success', token})
                }else{
                    res.json({ msg : 'fail' });
                }
            }
        )}

id랑 password가 회원가입에 저장된 data와 동일할 때 token을 발급해줍니다. 그 token 받은 것을 로그인 후 구분해서 사용할 수 있게 해줍니다. header은 signUp과 동일하게 진행합니다. 

 

이제 로그인 후 구분하기 위해서는 header 부분에 authorization 작성하고 value는 hashSync를 적용한 password를 불러오면 됩니다. 

앞에는 Bearer이 나올 것이고 뒤에 부분은 mongodb에서 저장된 password를 복사해서 붙이면 됩니다. 

그럼 get이나 post로 요청했을 때 

const { userId } = jwt.verify(tokenValue, process.env.SECRET_KEY);

		User.findById(userId, { _id: true, id: true, nickname: true, area: true })
			.exec()
			.then((user) => {
				res.locals.user = user;
				next();
			});

jwt.verify가 의미하는 것은 암호화된 JWT의 payload를 decoded라는 변수로 저장한다는 의미임으로 token해석한 것이 password와 일치한다는 의미이기도 하기때문에 모든 것이 다 true일 때 res.locals.user = user로 전달되서 사용하는 것을 볼 수 있습니다. 

 

백엔드를 할 때 페이지의 경로는 최대한 같게 하고 추가할 때는 post, 일부분만 업데이트할 때는 patch, 전체 업데이트할 때는 put, 제거할 때는 delete로해서 코드를 짜는 것이 효율적이라는 것을 알게 됬습니다. post로만 하게 되면 경로를 각각 다르게 설정해야하기 때문에 클린코드를 할 수가 없습니다. 

 

router.get('/', authMiddleware, async(req, res)=> {
	const user = res.locals.user;
	let area = user.area;
	let result = { status: 'success', exchangeBoardData: [] };
	try {
		let exchangeBoardData = await exchangeBoard.find({area: area}).sort({ date: -1 });
		console.log(exchangeBoardData)
		for (exchangeBoards of exchangeBoardData) {

			let temp = {
				exchangeId: exchangeBoards['_id'],
				nickname: sanitizeHtml(exchangeBoards['nickname']),
				area: sanitizeHtml(exchangeBoards['area']),
				contents: sanitizeHtml(exchangeBoards['contents']),
				date: calTime(exchangeBoards['date']),
				soldState: sanitizeHtml(exchangeBoards['soldState']),
				images: exchangeBoards['images']
			};
			result['exchangeBoardData'].push(temp);
		}
	} catch (err) {
		console.log(err)
		result['status'] = 'fail';
	}
	res.json(result);
} )

authMiddleware 사용방법이 인증된 유저 정보를 res.locals.user = user로 보내고 있기 때문에 const user = res.locals.user로 보내서 user정보에 있는 area를 가져와서 그것으로 find로 찾아서 유저 정보에 따라서 추가된 exchangeBoard의 값을 가지고 옵니다. 

 

아직 부족한 부분은 로그인 해서 token을 가지고 사용자 정보를 따로 가져와서 insomnia로 테스트하는 게 흐름은 알아도 익숙하지 않으니 많이 연습해봐야겠습니다.