- 보안 측면에서의 JWT
쿠키나 로컬스토리지에 JWT 토큰을 저장하는건 안전하지 못한 방법이다. 왜냐면 어떤 악성 스크립트에 의해서 쉽게 접근이 가능하기 때문이다
- front에 로컬스토리지에서 토큰을 꺼내 저장하는 방식
<script>
handleClick = e => {
const { email, password } = this.state;
e.preventDefault();
fetch('/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password,
}),
})
.then(res => {
return res.json();
})
.then(data => {
if (data.msg === 'SUCCESS_SIGNIN') {
localStorage.setItem('jwt', data.token);
const tokenInLocalStorage = localStorage.getItem('jwt', data.token);
console.log(tokenInLocalStorage);
}
});
};
</script>
- 서버에서 res.cookie에 담아서 보내준 뒤 브라우저의 cookie에서 저장하는 방식
res.cookie('jwt', accessToken);
<script>
const signInUser = async (req, res) => {
try {
const { email, password } = req.body;
const accessToken = await signInService.signInUser(email, password);
const decoded = jwt.verify(
accessToken,
process.env.ACCESS_TOKEN_SECRET_KEY
);
res.cookie('jwt', accessToken);
return res.status(201).send({
msg: 'SUCCESS_SIGNIN',
token: accessToken,
decoded,
});
} catch (error) {
const { statusCode, message } = error;
return res.status(400).send({
msg: message,
});
}
};
</script>