TIL 게시판 및 댓글 수정,삭제 기능(개선하기)

이전에 sequelize모듈을 이용하여 MySQL로 데이터베이스를 구축하고 인증된 사용자가 게시판의 게시글 및 댓글의 CRUD를 백엔드와 프론트로 구현을 하였다.

문제
다 된것처럼 보였지만 로그인 후 jwt로 생성한 인증 토큰만 받아왔을 뿐 작성자가 아닌 게시글이나 댓글을 수정 및 삭제가 가능하였다.
이 부분은 악의적 또는 사용자가 사용하기에 좋지 않은 서비스이기에 작성자만이 게시글 또는 댓글을 수정하도록 바꾸겠다.

서버부분의 게시글 수정 코드를 보면 이렇다.

update: async (req, res, next) => {
    const { id } = req.params;
    const foundUser = res.locals.foundUser;
    const { content } = req.body;
    const foundPost = await Post.findOne({ where: { id } });

    try {
      if (foundUser.id !== foundPost.userId) {
        return res.status(401).json({ Message: '수정할 권한이 없습니다.' });
      }
      await Post.update(
        { content },
        {
          where: { id },
        }
      );
      return res.status(200).json({ message: '게시글을 수정하였습니다.' });
    } catch (err) {
      console.log(err);
      res.status(400).json({ errorMessage: '게시글 수정에 실패하였습니다.' });
    }
  },

보면 서버부분에서는 로그인한 유저의 id와 작성자의 id를 매칭시켜서 한 번 검증하는 코드는 적용을 하였으나 프론트엔드에서 활용을 하지 못한 것 같다.
프론트엔드의 js코드를 한 번 살펴보자.

 // 게시글 수정
async function postUpdate() {
  const obj = {};
  const id = new URL(location.href).searchParams.get('id');
  const updateContent = prompt('수정할 내용을 입력하세요');
  obj.content = updateContent;
  const option = {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Authorization: token,
    },
    body: JSON.stringify(obj),
  };
  try {
    const fetchedData = await fetch(`http://localhost:3030/posts/${id}`, option).then((d) => {
      return d.json();
    });
      window.location.reload();
  } catch (e) {
    console.error(e);
    }
  }

프론트엔드에서 사용자 인증은 받아오지만 정작 서버에서 작성한 코드를 활용하지 않고 사용자 인증 토큰만 가져오고있다.
따라서 fetchedData변수로 서버의 자료를 갖고오고 있기 때문에 fetchedData에 에러 메세지가 있다면 그것을 alert으로 띄우는 코드를 넣어주면 되겠다.

수정된 코드:

// 게시글 수정
async function postUpdate() {
  const obj = {};
  const id = new URL(location.href).searchParams.get('id');
  const updateContent = prompt('수정할 내용을 입력하세요');
  obj.content = updateContent;
  const option = {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Authorization: token,
    },
    body: JSON.stringify(obj),
  };
  try {
    const fetchedData = await fetch(`http://localhost:3030/posts/${id}`, option).then((d) => {
      return d.json();
    });
    if(fetchedData.errorMessage){
      alert(`${fetchedData.errorMessage}`);
    }else{
      alert(`${fetchedData.message}`);
    }
    window.location.reload();
  } catch (e) {
    console.error(e);
  }
}

위와 같이 코드를 작성한 후 실제 페이지에서 테스트 해보니 작성자와 로그인한 유저의 아이디가 다르면 '게시글 수정에 실패하였습니다.'와 같은 메세지를 alert으로 띄우고 같으면 '게시글을 수정하였습니다.'가 alert으로 띄워졌다.