[Node.js, Vue.js] 로그인 시 alert 띄우기

 

++진짜 해결!

https://codelist.tistory.com/83 

 

 

내가 alert를 띄우려고 했던 시도들은 순서대로 아래 글들을 읽어보면 볼 수 있다.

 

1. https://codelist.tistory.com/61

[Vue.js, Node.js] Node.js에서 보낸 response Vue에서 처리

 

2. https://codelist.tistory.com/69

[Node.js, Vue.js, Ajax] ::디버깅 실패:: Vue.js alert 넣기

 

3. https://codelist.tistory.com/73

[Node.js, Vue.js, Ajax] -삽질기록- Vue.js alert 넣기

 

 

 

 

그리고 아래 코드로 성공 했다.

 

전에도 alert 띄우려고 아래처럼 res.send를 시도해 본 적 있는데 alert 뜨고나면 화면이 다 날라가서 하얀 상태에서 멈춰버려서 페이지 이동이 안되니까 포기했는데 이렇게 쓰면 페이지 이동까지 된다.

res.send("<script>alert('아이디/비밀번호를 입력해주세요.');location.href='/login';</script>");

 

 

그러나 테스트를 하다가 두 번째 alert 창을 띄우려고하면 Error: Can't set headers after they are sent. 라는 오류가 생긴다.

 

이 에러는 전에도 만났던 res.send를 두 번 보냈을 때 생기는 에러다.

 

에러가 생기는 것도 문제였는데 이 에러가 생기면 서버가 바로 죽어버린다.

 

배포 시 서버가 죽어버리면 안되기 때문에 try~catch문으로 감싸줬고 서버가 죽지 않고 이어서 잘 실행이 된다.

 

if(!users || err){ //id가 DB에 없으면(즉, id가 틀렸거나 회원가입이 안되어 있거나) 
      try{
        res.send("<script>alert('아이디가 틀렸습니다.');location.href='/login';</script>");
        }catch (exception) {
          res.redirect('/login');
        }

 

제일 좋은 건 백엔드->프론트로 response를 전달해서 프론트에서 response를 받아 alert를 띄우는 거지만 지금의 나에겐 이 방식이 최선인 것 같다.