Project/축구모임 홈페이지개발
[축구모임 홈페이지개발] 02/19 개발일지 Nodejs / 로그인 에러 수정
한33
2024. 2. 19. 23:23
출시가 얼마 안 남았다.
마무리를 하면서 기존에 수정하지 못한 몇 가지 부분들을 수정하고있다.
로그인 페이지에서는
기존에 form 태그를 이용해서 서버로 아이디와 비번을 보낸 후에 서버에서 DB와 비교 후,
passport.use(new LocalStrategy(async (입력한아이디, 입력한비번, cb) => {
let result = await db.collection('user').findOne({ userID: 입력한아이디 })
if (!result) {
return cb(null, false, { message: '아이디잘못침' })
}
if (await bcrypt.compare(입력한비번, result.password)) {
return cb(null, result)
} else {
return cb(null, false, { message: '비번잘못침' });
}
}))
위처럼 아예 화면에 새로운 창으로 띄워지는 코드를 짰었다.
근데 내가 원한건 alert 를 이용해 팝업을 띄우는 것이었다.
전부터 알아본 바로는 json 을 통해 서버로 전송을 시켜야한다는 것이었다.
json 을 통해 서버로 전송을 시키면서 javascript 로 데이터를 다뤄야한다.
onsubmit="return handleLoginFormSubmit()"
onsubmit 속성을 form 태그 안에 추가하고
handleLoginFormSubmit() 함수를 정의했다.
function handleLoginFormSubmit() {
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: document.getElementById('id-input').value,
password: document.getElementById('password-input').value,
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.href = '/';
} else {
alert('아이디 또는 비밀번호를 확인해주세요.');
}
})
.catch(error => {
console.error('에러:', error);
});
return false;
}
그러고 서버에서 html 로 다루는 것이 아닌 json 을 통해 다뤄야한다.
app.post('/login', async (req, res, next) => {
passport.authenticate('local', (error, user, info) => {
if (error) return res.status(500).json({ success: false, message: '서버 에러' });
if (!user) return res.status(401).json({ success: false, message: info.message });
req.logIn(user, (err) => {
if (err) return next(err);
return res.json({ success: true, redirectURL: '/' });
});
})(req, res, next);
});