[축구모임 홈페이지개발] 02/19 개발일지 Nodejs / 로그인 에러 수정

출시가 얼마 안 남았다.

마무리를 하면서 기존에 수정하지 못한 몇 가지 부분들을 수정하고있다.

 

로그인 페이지에서는

기존에 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);

});