댓글에 유저 정보를 담아보자 2

여기는 react 구현

<Redirect> : 로그인 성공시 accessToken, refreshToken, authority를 담아오는 페이지, authority를 localStorage에 객체로 담을 수 없기 때문에 JSON.stringfy()를 통해 스트링으로 저장해주고 나중에 JSON.parse()를 통해 객체로 받아주기 위한 수정

fetch("http://localhost:8080/authority", {
        headers: {
          AccessToken: localStorage.getItem("Tnut's accessToken"),
        },
      })
        .then((res) => res.json())
        .then((res) => {
          localStorage.setItem("authority", JSON.stringify(res.data));
        });

 

<UserContent> : 삭제됨

<Content>: 수정, 삭제, 댓글 을 조건부 렌더링을 통해 구현

-생략-
useEffect(() => {
    if (localStorage.getItem("authority")) {
      //authority라는 값이 있으면
      setAuthority(JSON.parse(localStorage.getItem("authority")).role); //Authority받음
    }
  }, [authority]);
  -생략-
  {authority === "ROLE_TNUT" ? (
        <>
          <Button variant="secondary" onClick={() => updateBoard()}>
            수정
          </Button>{" "}
          <Button variant="secondary" onClick={() => deleteBoard()}>
            삭제
          </Button>{" "}
          <Button variant="secondary" onClick={() => navigate(-1)}>
            돌아가기
          </Button>
        </>
      ) : (
        <>
          <Button variant="secondary" onClick={() => navigate(-1)}>
            돌아가기
          </Button>
        </>
      )}
      <hr />
      <Card>
        <Card.Body>Category: {subCategoryName.subCategoryName}</Card.Body>
      </Card>
      <Card>
        <Card.Body>{board.data.content}</Card.Body>
      </Card>
      <hr />
      <InputGroup className="mb-3">
        <Form.Control
          type="reply"
          onChange={changeValue}
          name="reply"
          placeholder="댓글을 입력하세요"
        />
        <Button
          variant="outline-secondary"
          id="button-addon2"
          onClick={submitReply}
        >
          댓글 등록
        </Button>
      </InputGroup>
      <hr />
      <>
        {replyList.map((comment) => {
          if (authority === "Admin") {
            return <AdminReplyItem key={comment.id} comment={comment} />; //관리자
          } else {
            return <ReplyItem key={comment.id} comment={comment} />; //유저
          }
        })}
      </>

<AdminReplyItem> fetch(어드민 전용 삭제 controller)

import React, { useState } from "react";
import { Button, Card, Form, InputGroup } from "react-bootstrap";
import AdminSubReplyItem from "./AdminSubReplyItem";

const AdminReplyItem = (props) => {
  const { content, id, subReplies, user } = props.comment;

  const [subReply, setSubReply] = useState({
    parentReply_id: id,
    content: "",
  });

  const changeValue1 = (e) => {
    setSubReply((subReply) => ({
      ...subReply,
      content: e.target.value,
    }));
  };

  const submitRereply = (e) => {
    e.preventDefault();
    fetch("http://localhost:8080/user/api/reReply/save", {
      method: "post",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
        AccessToken: localStorage.getItem("Tnut's accessToken"),
      },
      body: JSON.stringify(subReply),
    })
      .then((res) => {
        if (res.status === 200) {
          return res.json();
        } else {
          return null;
        }
      })
      .then((res) => {
        if (res === null) {
          alert("댓글 등록 실패!");
        } else {
          window.location.reload();
        }
      });
  };

  const deleteReply = () => {
    fetch("http://localhost:8080/admin/api/reply/" + id + "/delete", {
      method: "DELETE",
      headers: {
        AccessToken: localStorage.getItem("Tnut's accessToken"),
      },
    })
      .then((res) => res.text())
      .then((res) => {
        if (res === "success delete!") {
          window.location.reload();
        } else {
          alert("삭제 실패");
        }
      });
  };

  return (
    <div>
      <Card>
        <Card.Header as="h5">
          작성자: {user.username}{" "}
          {content !== null ? (
            <Button variant="outline-secondary" onClick={() => deleteReply()}>
              삭제
            </Button>
          ) : (
            <></>
          )}
          <InputGroup className="mb-3">
            <Form.Control
              type="subReply"
              onChange={changeValue1}
              name="subReply"
              placeholder="글을 입력하세요"
            />
            <Button
              variant="outline-secondary"
              id="button-addon2"
              onClick={submitRereply}
            >
              답변하기
            </Button>
          </InputGroup>
        </Card.Header>
        <Card.Body>
          {content !== null ? (
            <Card.Text>{content}</Card.Text>
          ) : (
            <Card.Text>"삭제된 댓글입니다."</Card.Text>
          )}
          <>
            {subReplies.map((subreply) => {
              return (
                <AdminSubReplyItem key={subreply.id} subreply={subreply} />
              );
            })}
          </>
        </Card.Body>
      </Card>
      <br />
    </div>
  );
};

export default AdminReplyItem;

<AdminSubReplyItem>

import React from "react";
import { Button, Card } from "react-bootstrap";

const AdminSubReplyItem = (props) => {
  const { content, id, user } = props.subreply;

  const deleteReply = () => {
    fetch("http://localhost:8080/admin/api/reply/" + id + "/delete", {
      method: "DELETE",
      headers: {
        AccessToken: localStorage.getItem("Tnut's accessToken"),
      },
    })
      .then((res) => res.text())
      .then((res) => {
        console.log(res);
        if (res === "success delete!") {
          window.location.reload();
        } else {
          alert("삭제 실패");
        }
      });
  };

  return (
    <div>
      <Card>
        {content !== null ? (
          <Card.Body>
            {content} 작성자: {user.username}
            {"   "}
            <Button variant="outline-secondary" onClick={deleteReply}>
              삭제
            </Button>{" "}
          </Card.Body>
        ) : (
          <Card.Body>
            "삭제된 댓글입니다."
            {"   "}
          </Card.Body>
        )}
      </Card>
    </div>
  );
};

export default AdminSubReplyItem;

---

느낀 점 : 변수명이 내가 아니면 알아볼수 없는 것들이 잔뜩이고...만일 admin계정의 jwt가 탈취된다면 정말 큰일이 날 것 같은 코드라는 생각이든다. 다른 방법이 없는지 고려해 보고, 좀 더 획기편리한 회원 및 댓글 관리를 위해서 관리자 전용 서버를 만들거나 페이지를 만들어야 겠다는 생각이든다.