해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.
현재까지 만들어온 ToDoList 사이트는 누구든지 글을 삭제하고 수정할 수 있었다.
이번 글에서는 해당 글을 작성한 사람만 해당글을 삭제 또는 수정할 수 있는 회원기능을 포함한 사이트를 만들어 보겠다.
1. 작성한 글에 작성자의 고유 ID 담아서 DB에 저장하기
현재까지 작성된 코드는 게시물의 번호와 제목, 마감일만 DB에 보냈다. 해당 데이터로는 누가 글을 썼는지 알 수 없다.
그래서 이번에 글을 작성할 때는 위의 데이터 뿐만 아니라 로그인한 사용자의 _id까지 DB에 보내보자.
그러면 사용자의 _id는 어떻게 가져올까?
이 글에서 우리는 request.user에 대해서 배웠다. 해당 데이터는 로그인한 유저의 모든 정보를 담고 있는데 이 데이터에서 id를 가져와서 글을 작성할 떄 보낼 데이터에 넣어서 보내면 된다.
주의할점
request.user는 해당 데이터를 가져오는
deserializeUser 함수 아래에 있어야 제대로 사용이 가능하다.
[변경 전 코드]
app.post('/add', function (request, response) {
db.collection('counter').findOne({name: 'postsNum'}, function (error, result) {
var totalPost = result.totalPost;
db.collection('post').insertOne({ _id: (totalPost + 1), title: request.body.title, date: request.body.date}, function (error, result) {
db.collection('counter').updateOne( {name : 'postsNum' } , { $inc : { totalPost : 1 } } , function (error, result) {
if (error) {return console.log(error)};
});
});
response.render('success.ejs');
})
});
[변경 후 코드]
app.post('/add', function (request, response) {
db.collection('counter').findOne({name: 'postsNum'}, function (error, result) {
var totalPost = result.totalPost;
var saveData = { _id: (totalPost + 1), title: request.body.title, date: request.body.date, writer: request.user._id};
db.collection('post').insertOne(saveData, function (error, result) {
db.collection('counter').updateOne( {name : 'postsNum' } , { $inc : { totalPost : 1 } } , function (error, result) {
if (error) {return console.log(error)};
});
});
response.render('success.ejs');
})
});
2. 로그인한 유저가 작성한 글일 때 삭제할 수 있도록 만들기
현재까지 작성한 코드는 삭제 요청을 하면 해당 게시물을 DB에서 찾아서 바로 삭제했다.
하지만 이제 우리가 작성한 글에는 작성한 유저의 아이디도 담겨있다. 따라서 삭제기능을 업그레이드 한다면 삭제하려는 게시물의 번호와 현재 로그인한 사용자의 고유한 id가 같이 있는 데이터를 찾아서 삭제하도록 만들면 된다.
또한 삭제되었는지 확인하기 위해서 삭제 요청을 한후 해당 데이터가 있는지 없는지 확인 후 있다면 삭제가 제대로 안된 것이고 없다면 삭제가 되었기 때문에 해당 결과에 따른 response 값을 보내준다.
app.delete('/delete', function(request, response){
request.body._id = parseInt(request.body._id)
var selectedData = { _id: request.body._id, writer: request.user._id } //삭제할 데이터가 삭제할 게시물이 해당 아이디이면서 작성자가 현재 로그인한 작성자인 경우를 삭제한다.
db.collection('post').deleteOne( selectedData, function(error, result){
})
db.collection('post').find({_id: request.body._id}).toArray(function(error, result){ //삭제한 데이터가 서버에 존재하는지 확인
console.log(result.length);
if (result.length == 0) { //삭제한 데이터가 서버에 존재하지 않으면 성공
response.status(200).send({ message: '성공했습니다!' })
} else { //삭제한 데이터가 서버에 존재하면 실패
response.status(400).send({ message: '삭제할 수 없습니다.' })
}
}); //DB에 있는 모든 데이터를 찾아주세요
});
2번을 응용하면 수정기능도 로그인한 유저만 할 수 있도록 할 수 있다.
번외) 로그인한 유저가 작성한 글에만 삭제 버튼이 보이도록 만들기 (프론트)
로그인한 유저가 작성한 글만 삭제 버튼이 있도록 할려면 목록 페이지를 렌더링할 때 목록 데이터 뿐만 아니라 request.user의 아이디도 함께 보내서 목록 데이터에 있는 고유 아이디 값과 request.user의 아이디비교한 결과에 따라 HTML을 추가하면된다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="public/main.css"> -->
<script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<!--nav 부분 조립식으로 include하기 -->
<%- include('nav.html') %>
<div class="container mt-3">
<h4>상세 페이지</h4>
<br>
<div class="card" style="width: 100%">
<div class="card-body">
<h5 class="card-title"><%= data.title %></h5>
<h6 class="card-subtitle mb-2 text-muted"><%= data.date %></h6>
<!--만약 현재 로그인한 사용자의 아이디와 해당 게시물의 작성자 아이디가 같을 경우 HTML 추가 -->
<% if(Userdata._id == data.writer.toString()){ %>
<button type="button" id="edit" class="btn btn-primary">수정하기</button>
<% } %>
</div>
</div>
</div>
<!-- EJS: html을 쓰기 쉽게 도와주는 전처리 엔진(라이브러리)-->
<!-- jQeury install -->
<!-- <script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('#edit').click(function(){
location.href = `http://localhost:8080/edit/${<%= data._id %>}`
})
</script>
<!-- JavaScript -->
<!-- <script src="main.js"></script> -->
<!-- bootstrap install -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>'Server > Node.js' 카테고리의 다른 글
| 이미지 업로드 해보기 (0) | 2023.09.11 |
|---|---|
| 라우터 폴더와 파일 만들어서 API 관리하기 (0) | 2023.09.10 |
| 검색기능 만들기(3) - Search Index (0) | 2023.09.09 |
| 검색기능 만들기(2) - indexing 개념 (0) | 2023.09.08 |
| 검색기능 만들기(1) - URL query string (0) | 2023.09.08 |
