회원기능(회원만 삭제가능)

지금처럼 만들면 리스트에서 삭제를 누르면 누구나 글 삭제가 가능하다. 이제, 내가 쓴 글만 삭제 가능하게 만들어보자.

여러명의 유저가 있어야 할 것 같아서 회원가입을 먼저 만들어보자

<form class="container mt-4" action="/register" method="POST">
      <div class="mb-3 form-group">
        <label class="form-label">아이디</label>
        <input type="text" class="form-control"  placeholder="아이디" name="id">
      </div>
      <div class="mb-3 form-group">
        <label class="form-label">비밀번호</label>
        <input type="text" class="form-control"  placeholder="비밀번호" name="pw">
      </div>
      <button type="submit" class="btn btn-primary">가입</button>
</form>

아이디와 비밀번호를 입력해 /register로 보내주는 form을 만들고 post요청하면 서버에서 db에 저장하면 완성이다.

server.js에서 작성할 땐 passport 셋팅부분 아래에 작성해야 한다.

app.post('/register',function(요청, 응답){
    db.collection('login').insertOne( { id : 요청.body.id, pw : 요청.body.pw } ,function(에러, 결과){
        응답.redirect('/');
    })
})

/register로 들어가면 db에 insertOne함수를 이용해 id와 pw라는 이름으로 form에 적은 값을 저장해주고, 완료되면 응답.redirect로 홈으로 돌아가게 한다.

 

이제 글을 쓴 사람만 삭제버튼을 누를 수 있게 해야하는데, post라는 collection에 현재는 작성자가 저장되어있지 않아서, 글을 작성할 때 작성자도 나오도록 만들어보자.

app.post('/add', function(요청, 응답){
    응답.send('전송완료');
    db.collection('counter').findOne({ name: '게시물갯수'}, function(에러, 결과){
        var 총게시물갯수 = 결과.totalPost;

        var 저장할거 =  { _id : 총게시물갯수 + 1, 제목 : 요청.body.title, 
        		날짜 : 요청.body.date, 작성자 : 요청.user._id}
        db.collection('post').insertOne(저장할거, function(에러, 결과){
            console.log('저장완료');
            //글 발행하고 counter내의 totalPost를 1 증가시키자.
            db.collection('counter').updateOne({name : '게시물갯수'},
            		{$inc : {totalPost:1}},function(에러, 결과){

            })//하나수정은 updateOne  한번에 많이 수정은 updateMany
        });
    });
    
});

글을 저장해 /add로 접속할 때, counter라는 collection에서 name이 게시물갯수인 아이를 찾아서 totalPost라는 총게시물갯수를 변수로 저장했었고, inserOne함수를 이용해 post라는 collection에 _id는 게시물마다 1씩 증가하게, 그리고 title과 date를 저장했으며, $inc를 사용해 totalPost를 1씩 증가시켰다. 

여기에, 작성자라는 이름으로 요청.user._id를 적으면 id가 저장된다. 그리고 요청.user.id 또는 요청.user.pw이렇게 적으면 id나 pw도 볼 수 있다.

위의 /add도 passport기능개발보다 아래에 있어야 작동이 된다. 

 

이제, 글을 저장할 때 작성자도 저장되게끔 요청.user._id를 이용해 각각 아이디가 저장되므로

삭제요청이 들어오면 그 게시물의 작성자와 현재 삭제요청을 한 사람과의 아이다가 같다면 삭제해주면 된다.

app.delete('/delete', function(요청,응답){
    //실제 로그인중인 유저의_id와 글에 저장된 유저의 _id가 일치하면 삭제시켜주셈
    console.log(요청.body);
    //우리가 보낸 id는 문자로 나오고 mongoDB의 id는 숫자이기 때문에 변환과정 필요
    요청.body._id = parseInt(요청.body._id);
    
    var 삭제할데이터 = { _id : 요청.body._id, 작성자 : 요청.user._id }
    //요청.body에 담긴 게시물번호에 따라 DB에서 게시물삭제
    db.collection('post').deleteOne(삭제할데이터, function(에러, 결과){//삭제해주는 함수
        
        if(결과) {console.log(결과)}
        if(결과.deletedCount ==0) {
            console.log('삭제실패! 회원이 아닙니다.')
            응답.status(400).send( {message : '실패했습니다'} )
        } else {
            console.log('삭제완료');
            응답.status(200).send( {message : '성공했습니다'} ) //응답코드 200을 보내주고 메세지도보내주셈
            //응답코드 200을 보내주세요 200은 성공했다는 뜻 
            //400은 고객잘못으로 요청실패라는 뜻 500은 서버문제로 요청실패라는 뜻
            //서버가 꼭 뭔가 응답해줘야 ajax가 잘 작동함
        }
    }) 
})

먼저, list.ejs에서 _id란 이름으로 현재 클릭한 게시물의 id를 보냈으니 요청.body._id를 정수로 바꿔주고, 삭제할데이터라는 변수에 _id가 일치하고, 작성자가 현재작성자와 일치한지 두개를 담아주고,

db에서 두 조건에 만족할 때 삭제해달라고 해주면 된다.

그리고, 삭제할 때, deletedCount라고 삭제되는 수가 항상 나오는데, 값이 0이면 작성자가 일치하지 않아서 삭제가 실행되지 않았으므로 if문을 이용해 삭제실패를 띄어주면 된다. 그리고 응답코드 400을 보내주면서 list.ejs에서

$('.delete').click(function(e) {
          var 글번호 = e.target.dataset.id;
          var 지금누른거 = $(this);//제이쿼리의 this는 현재 이벤트가 동작하는 것을 뜻함

          $.ajax({
            method : 'DELETE',
            url : '/delete',
            data : {_id : 글번호 }
          }).done(function(결과){
          //성공했는지 실패했는지 알려줘야함 즉, 서버에서 응답을 해줘야 done을 실행시킨다.
            console.log('성공했어염');
            지금누른거.parent('li').fadeOut();
          }).fail(function(xhr, textStatus, errorThrown){
            alert('회원이 아닙니다.')
})

이렇게 실패했을때, alert를 띄어주면 완성이다!