(김유선) 중고거래 사이트를 SPA로 만들기 6일차 - 로그인 기능

로그인 기능을 구현했으니 이번엔 채팅 기능 등등을 구현해야 한다.

우선 로그인을 하면 채팅 기능이 동작하고, 로그인하지 않으면 로그인 창으로 이동하도록 해야 한다.

그러기 위해 채팅 버튼을 눌렀을 때 요청.user 값을 확인하고 유저가 존재하면 채팅창으로 넘어가도록 해야 한다.

 

요청.user 값 확인

요청.user값을 보내주기 위해 로그인 성공했을 때 보내는 데이터에 username도 포함시켰다.

app.post('/login', async (요청, 응답, next) => { // 로그인 요청하면

  passport.authenticate('local', (error, user, info) => { // passport 라이브러리를 사용해서 사용자의 정보와 db 정보가 일치하는지 비교해주는 코드 (아래의 세팅 코드)를 실행해줌

      if (error) return 응답.status(500).json(error)

      if (!user) return 응답.json(info.message) // status(401)인데 응답으로 사용자에게 데이터를 바로 띄워줄 거라 제외함

      요청.logIn(user, (err) => {

        if (err) return next(err)

        응답.json(요청.user.username+'님 환영합니다.') // 로그인 성공하면 이 데이터 보냄

      })

  })(요청, 응답, next)

})

 

그러면 로그인했을 때 이런 창이 뜬다. 아주 성공적.

 

그러면 반대로 로그인하지 않았을 때의 username 값은 어떨까?

$('.chatroombtn').click(function(){

            $.get('/chatroom')

            .done(function(data){

                console.log(data)

            })

})

요 코드로 한번 확인해봤다. (홈에 있는 채팅 버튼이다.)

로그인한 후에 채팅 버튼을 누르면 이렇게 멀쩡히 콘솔창에 뜨게 된다.

반면 쿠키를 지우고 채팅 버튼을 누르니 백만번을 눌러도 아무런 값이 없었다. 아무래도 get 요청이 실패한 것 같아 fail을 추가해주었다.

$('.chatroombtn').click(function(){

            $.get('/chatroom')

            .done(function(data){

                console.log(data)

            })

            .fail(function(data){

                console.log(data)

            })

 })

요러니까 로그인 안했을 때 뭐라뭐라 하는 게 잘 뜬다.

로그인을 했는지의 유무는 fail 과 done으로 구분하면 될 것 같다.

그럼 그에 맞게 디자인을 해보자

로그인 후 디자인

이 디자인을

이렇게 바꿨다(기능도 늘리고 디자인도 이뻐짐).

 

 

로그인이 되면

1. 로그인/회원가입 버튼이 로그아웃 버튼으로 바뀔 것 (로그인/회원가입 display=none;하고 none 해뒀던 로그아웃을 block으로 바꿀 생각)

2. 내 물건 팔기 버튼이 동작할 것   => '내물건팔기'에 필요한 데이터는 내 아이디이고, post 요청을 받아서 올린 사진과 제목 내용 등을 받아야 한다.

3. 채팅 기능이 동작할 것 => '채팅'에 필요한 데이터는 내 정보, 주고받은 채팅 내용

4. 찜 버튼이 동작할 것 => '찜'에 필요한 데이터는 내 정보, 물건 정보

5. 내 상점 버튼이 동작할 것 => '내상점'에 필요한 데이터는 내 정보, 내가 올린 물건들, 내가 찜한 물건들

 

위의 것들은 로그인을 하지 않으면 할 수 없는 기능들이다.

그럼 위의 것들을 실현시켜보자.

 

$('#login_submit').click(function(){ // 로그인 버튼을 눌렀을 때

            if($('#login_id').val()!='' && $('#login_pw').val()!=''){ // 둘다 공백이 아니면

                $.post('/login',{ // login으로 post 요청 보냄

                    username : $('#login_id').val(),

                    password : $('#login_pw').val()

                })

                .done(function(data){

                    alert(data) // 위 코드에서 응답한 json 데이터를 알림창으로 보내줌

                    $('.login_bg').css('display','none')

                    $('.login_container').css('display','none')

                    if(data=='나다장터에 오신 걸 환영합니다.'){

                        alert('성공')

                    }

                })

            }

            else{alert('아이디 혹은 비밀번호를 입력하지 않았습니다.')} // 둘 중 하나라도 공백이면 이거 띄워줌

        })

일단 먼저 로그인 상태를 확인하기 위해 로그인하고 보내는 데이터를 나다장터에 오신 걸 환영합니다. 로 수정했다.

위에서 요청.user 값을 괜히 확인했나 싶을 수 있지만 아니다.

그건 위의 1~4번같은 걸 로그인을 하지 않은 채로 실행하면 로그인 창이 나오게 할 때 쓸 수 있다.

이건 로그인을 한 순간 디자인이 바뀌게 하기 위함이다.

(서버 비용을 아낄 수 있도록 데이터에 아이디를 빼고 로그인하면서 바로 디자인을 바꿀 수 있도록 했다.)

 

로그인 기능 1

1. 로그인/회원가입 버튼이 로그아웃 버튼으로 바뀔 것

로그인 전 모습

로그인 후 모습

 

내일 로그아웃 만들어야징