로그인, 회원가입에서 submit 때 페이지 새로고침 문제

조회수 3741회

안녕하세요. node.js 로 웹사이트를 개발 중인데, 로그인과 회원가입 페이지를 개발하려고 합니다.

input 에 대해서는 jquery 의 validation 을 사용하여 검증 로직을 구현하였습니다.

그리고 input 정보를 다 입력하면, submit 버튼을 누르는데 이 때 db를 읽고 계정 정보가 잘못되면,

실패 메시지를 던지면서 페이지가 새로고침 됩니다. 새로고침 되니 input 에 입력했던 정보들이 싹 초기화가 됩니다.

위 같은 문제를 어떻게 해결할 수 있나요?

아래는 제가 구현 중인 코드입니다.

로그인 버튼 클릭 시

$.ajax({
          type: "POST",
          url: "/login",
          dataType: "json",
          data: $("form").serialize(), // 서버로 데이터 전달할 때
          success: function(response) { // 성공했을 때 success 콜백 호출
            if(response == 'success') {

            } else {
            $("#message").html("<p style='color:red'>아이디 또는 비밀번호가 잘못되었습니다.</p>");
            }
         }
   });
   return false;

post 요청 후 db 등 처리

router.post('/login', function(req, res, next) {

  pool.getConnection(function(err, conn) {

    // DB 계정 존재 여부
    var selectQuery = 'SELECT * FROM user WHERE email = ' + mysql.escape(req.body.email);
    conn.query(selectQuery, function(err, rows) {
      next();
    });
  })
  }, passport.authenticate('local-login', {
      successRedirect : '/',
      failureRedirect : '/login',
      failureFlash : true
  })
);

도움 주시면 감사드립니다.

감사합니다.

1 답변

  • 제생각엔 코드엔 문제가 없는데 form 태그가 있는 html을 보여주시겠어요?

    form 태그에 onsubmit 에 넣으신거라면 문제가 없어보이는데..

    아니면 if나 else 코드밑에 return false;를 바로넣어보세요.

    • (•́ ✖ •̀)
      알 수 없는 사용자
    • success 부분에 내용이 없는데 괜찮은건가요? 저 부분을 어떻게 구현해야할지 모르겠습니다... 1. ajax 에서 db 접근 후 계정 확인 2. 확인 후 index 페이지로 넘기기 상남자 2016.7.14 19:18
    • 아.. 제가 틀린것 같습니다.새로고침되는이유가 failureRedirect : '/login', 이코드때문인것 같은데요? 서버단에서는 유저정보가 맞는지 틀리는지 True, False 만 판단해줘야합니다. 그래서 response를 가져왔을때 True냐 False냐를 구해야할것 같습니다 알 수 없는 사용자 2016.7.14 19:26
    • 그래서 대충 수도코드를 적자면 알 수 없는 사용자 2016.7.14 19:25
    • login(id, pw) -> True 혹은 False를 return. Ajax에서 아이디 패스워드를 보내서 온 response를 분기해서 if true면 성공 false 면 실패 알 수 없는 사용자 2016.7.14 19:26
    • 아 redirect 같은 코드는 서버 내에서 사용 안하는게 관례인가요?? 서버단에서 true/false 로 리턴하면 된다는 말씀이죠? 계속해서 성실한 답변 감사드립니다. 상남자 2016.7.14 22:27
    • 아뇨. 그냥 보통 ajax를 사용안하고 그냥 submit할때는 redirect를 해줘야 되는데 지금같은 경우엔 ajax로 요청을 하는거라서 원하는 상황을 만들려면 redirect를 하시면 안됩니다. 아마 기존에 로그인하는 코드를 사용하고있다면 새로운 컨트롤러를 만들고 거기에 ajax 로그인 전용을 만드시는걸 추천해요. 알 수 없는 사용자 2016.7.15 10:19
    • 아이디 비밀번호를 보내서 로우가있다면 success 없다면 fail을 응답으로 보내게 되면. 이제 저 ajax 요청코드가 맞게되죠. 그래서 결론은 저기 node.js에 코드를 수정하셔야 합니다. 알 수 없는 사용자 2016.7.15 10:27
    • 보통 로그인, 회원가입이라는게 검증은 당연한거고, 검증 후 submit 해서 db 검증 했을 때 실패하면 사용자에게 알려주고 수정하도록 해줘야 하는게 기본이죠? 이 과정에 submit 후 새로고침되면서 input 데이터가 모두 날라가 다시 입력해야 하는 상황이 발생하는게 문제였습니다. redirect가 문제인 것을 알았으니 고쳐보겠습니다. 성실한 답변 감사합니다. 상남자 2016.7.15 22:53

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)