💻 코딩 일기 : [스프링 게시판 with React] '게시판, 회원정보 권한 설정하기' 편

🔔 '게시판, 회원정보 권한 설정하기'에 대해서 알아보자!

💟 글 작성 시 게시판 닉네임을 회원 닉네임으로 받기

BoardWrite.jsx(React)

export function BoardWrite() {
  const account = useContext(LoginContext);
	~~

  return (
		~~
        </Box>
        <Box>
          <FormControl>
            <FormLabel>작성자</FormLabel>
            <Input readOnly value={account.nickName} />
          </FormControl>
        </Box>
        	~~
  );
}

• 기존에는 작성자를 따로 기입했는데 작성자를 따로 기입하지 않고 LoginProvider에서 닉네임을 받아옵니다.
• LoginProvider에서 닉네임을 받아오는 과정은 login을 했을 때 setNickName으로 nickName을 업데이트 해주기 때문에 닉네임을 받을 수 있습니다.

DB에도 게시판 작성자를 member의 id로 바꿔줘야 하기 때문에 바꿔주는 코드를 작성해야 합니다.

BoardController.java

 @PostMapping("add")
    @PreAuthorize("isAuthenticated()")
    public ResponseEntity add(
            Authentication authentication,
            @RequestBody Board board) {
        if (service.validate(board)) {
            service.add(board, authentication);
            return ResponseEntity.ok().build();
        } else {
            return ResponseEntity.badRequest().build();
        }
    }

@PostMapping("signup")
@PreAuthorize("isAuthenticated()")
public ResponseEntity signup(Authentication authentication, @RequestBody Member member) {
    if (service.validate(member)) {
        service.add(member);
        return ResponseEntity.ok().build();
    } else {
        return ResponseEntity.badRequest().build();
    }
}

• 기존 글쓰기 코드에 권한을 부여하는 코드를 작성합니다.
• @PreAuthorize("isAuthenticated()")을 사용하여 현재 사용자가 인증되었는지 확인합니다. 확인하는 방법은 토큰으로 확인합니다.

BoardService.java

public void add(Board board, Authentication authentication) {
    board.setMemberId(Integer.valueOf(authentication.getName()));
    mapper.insert(board);
}

• 기존에 있던 코드에서 Authentication을 추가하여 사용자의 인증 정보를 나타내는 코드를 추가합니다.
• 토큰을 생성할 때 subject를 DB에 있는 member의 Id로 설정했습니다.(MemberService.java)
• board 객체의 memberId 필드를 authentication.getName()에서 얻은 값을 Integer로 변환하여 설정합니다.

BoardMapper.java

@Insert("""
        INSERT INTO board (title, content, member_id)
        VALUES (#{title}, #{content}, #{memberId})
        """)
int insert(Board board);

• board에 writer를 지우고 member_id로 바꿔서 게시판을 추가하는 쿼리로 변경합니다.

💟 작성자 member의 닉네임으로 바꿔주기

**1. 전체 게시글 조회 **

BoardMapper.java

@Select("""
        SELECT b.id, b.title , m.nick_name writer
        FROM board b JOIN member m 
        ON b.member_id = m.id 
        ORDER BY b.id DESC
        """)
List<Board> selectAll();

• 모든 게시글을 보여줄 때, 게시판의 writer가 아닌 member의 nick_name을 가져와 보여줘야 하기 때문에 board 테이블과 member 테이블을 JOIN을 합니다.

2. 해당 id 게시글 조회

BoardMapper.java

@Select("""
        SELECT b.id,
               b.title,
               b.content,
               b.inserted,
               m.nick_name writer
        FROM board b JOIN member m ON b.member_id = m.id
        WHERE b.id = #{id}
        """)
Board selectById(Integer id);

• 해당 id의 게시글에 작성자가 writer가 아닌 member의 nick_name을 보여주기 위해 board 테이블과 member 테이블을 JOIN을 합니다.

💟 자신의 게시글만 삭제하기(Delete)

BoardController

@DeleteMapping("{id}")
@PreAuthorize("isAuthenticated()")
public ResponseEntity delete(@PathVariable Integer id,
                             Authentication authentication) {
    if (service.hasAccess(id, authentication)) {
        service.remove(id);
        return ResponseEntity.ok().build();
    }
    return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
}

• 로그인을 했는지 @PreAuthorize("isAuthenticated()")로 확인하고 만약 로그인 했다면 해당 id에 접근할 권한이 있는지 id가 현재 인증된 사용자의 계정이 맞는지 확인하고 맞다면 서비스에서 해당 게시글을 제거해줍니다.

BoardService.java

public boolean hasAccess(Integer id, Authentication authentication) {
    Board board = mapper.selectById(id); //게시물 번호
    return board.getMemberId().equals(Integer.valueOf(authentication.getName()));
}

• 게시물 번호(board.getMemberId())와 계정의 아이디(authentication.getName())가 같다면 true를 반환하고 아니면 false를 반환합니다.

BoardMapper.java

@Select("""
        SELECT b.id,
               b.title,
               b.content,
               b.inserted,
               m.nick_name writer,
               b.member_id
        FROM board b JOIN member m ON b.member_id = m.id
        WHERE b.id = #{id}
        """)
Board selectById(Integer id);

• 회원의 아이디 번호를 알아야 하기 때문에 board 테이블에 member_id를 추가줍니다.

BoardView.jsx(React)

 axios
      .delete(`/api/board/${id}`, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })

• DELETE 요청을 할 때, Authorization 헤더에 Bearer 토큰을 포함시켜야 합니다. 이 토큰이 있어야 서버에서 요청을 인증하고 권한을 확인할 수 있습니다. 따라서, 토큰을 같이 보내야만 사용자가 해당 리소스에 접근할 권한이 있는지 검증할 수 있으며, 권한이 있는 경우 요청이 처리됩니다.

💟 자신의 게시글만 수정하기(Update)

BoardController.java

    @PutMapping("edit")
    @PreAuthorize("isAuthenticated()")
    public ResponseEntity edit(@RequestBody Board board, Authentication authentication) {
        if (!service.hasAccess(board.getId(), authentication)) {
            return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
        }
        if (service.validate(board)) { // 제목, 내용 유효성 검사
            service.edit(board);
            return ResponseEntity.ok().build();
        } else {
            return ResponseEntity.badRequest().build();
        }
    }

• 로그인을 했는지 @PreAuthorize("isAuthenticated()")로 확인하고 만약 로그인 했다면 해당 board 객체의 id에 접근할 권한이 있는지 board 객체의 id가 현재 인증된 사용자의 계정이 맞는지 service에서 확인하고 아니라면 FORBIDDEN 응답 코드를 반환합니다.

BoardMapper.java

@Update("""
        UPDATE board SET title=#{title}, content=#{content}
        WHERE id=#{id}
        """)
int update(Board board);

• UPDATE에서 writer 컬럼을 삭제합니다.

BoardEdit.jsx(React)

axios
      .put("/api/board/edit", board, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })

• PUT 요청을 할 때, Authorization 헤더에 Bearer 토큰을 포함시켜야 합니다. 이 토큰이 있어야 서버에서 요청을 인증하고 권한을 확인할 수 있습니다.

**BoardView.jsx(React)** ~~~ // BoardView.jsx {account.hasAccess(board.memberId) && ( navigate(`/edit/${board.id}`)} > 수정 삭제 )}

- 자신의 게시글이라면, 해당 권한이 있다면 수정, 삭제 버튼을 보이게 합니다.

---

### 💟 **자신의 회원 정보만 열람(READ)**

<br>

**Member.jsx(React)**
```java
axios
      .get(`/api/member/${id}`, {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })

if (err.response.status === 403) {
          toast({
            status: "error",
            description: "접근 권한이 없습니다.",
            position: "top-right",
            duration: 1000,
          });
          navigate(-1); //이전하면
        }

• GET 요청을 할 때, Authorization 헤더에 Bearer 토큰을 포함시켜야 합니다. 이 토큰이 있어야 서버에서 요청을 인증하고 권한을 확인할 수 있습니다.
• 404(FOBBDIEN) 응답 코드를 받으면 접근 권한이 없다는 메시지를 toast를 사용해서 보이게 하고 이전 화면으로 이동합니다.

MemberController.java

@GetMapping("{id}")
@PreAuthorize("isAuthenticated()")
public ResponseEntity get(@PathVariable Integer id, Authentication authentication) {
    if (!service.hasAccess(id, authentication)) {
        return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
    }

    Member member = service.get(id);
    if (member == null) {
        return ResponseEntity.notFound().build();
    } else {
        return ResponseEntity.ok().body(member);
    }
}

• 로그인을 했는지 @PreAuthorize("isAuthenticated()")로 확인하고 만약 로그인 했다면 해당 id에 접근할 권한이 있는지 id가 현재 인증된 사용자의 계정이 맞는지 서비스에서 확인합니다. 만약 아니라면 FORBIDDEN 응답 코드를 반환합니다.

MemberService.java

    public boolean hasAccess(Integer id, Authentication authentication) {
        return authentication.getName().equals(id.toString());
    }

• 현재 인증된 사용자의 ID(authentication 객체의 이름)와 클라이언트로부터 주어진 id를 비교합니다.

💟 자신의 회원 정보만 수정(Update)

MemberController.java

    @PutMapping("modify")
    @PreAuthorize("isAuthenticated()")
    public ResponseEntity modify(@RequestBody Member member, Authentication authentication) {
        if (service.hasAccessModify(member, authentication)) {
            service.modify(member);
            return ResponseEntity.ok().build();
        } else {
            return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
        }
    }

• 로그인을 했는지 @PreAuthorize("isAuthenticated()")로 확인하고 만약 로그인 했다면 member 객체에 접근할 권한이 있는지 member 객체가 현재 인증된 사용자의 계정이 맞다면 서비스에서 해당 member 정보를 수정합니다.

MemberService.java

public boolean hasAccessModify(Member member, Authentication authentication) {
        if (!authentication.getName().equals(member.getId().toString())) {
            return false;
        }
		~~~
}

• 현재 인증된 사용자의 ID와 Member 객체의 ID를 문자롤 변환하여 두 값을 비교합니다.

💟 자신의 계정만 회원 탈퇴하기(Delete)

MemberController.java

@DeleteMapping("{id}")
@PreAuthorize("isAuthenticated()")
public ResponseEntity delete(@RequestBody Member member,
                             Authentication authentication) {
    if (service.hasAccess(member, authentication)) {
        service.delete(member.getId());
        return ResponseEntity.ok().build();
    }
    return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
}

• 로그인을 했는지 @PreAuthorize("isAuthenticated()")로 확인하고 만약 로그인 했다면 해당 member에 접근할 권한이 있는지 member가 현재 인증된 사용자의 계정이 맞는지 확인하고 맞다면 서비스에서 자신의 계정을 탈퇴합니다.

MemberService.java

public boolean hasAccess(Member member, Authentication authentication) {
    if (!member.getId().toString().equals(authentication.getName())) {
        return false;
    }
    Member dbMember = mapper.selectById(member.getId());
    if (dbMember == null) {
        return false;
    }

    return passwordEncoder.matches(member.getPassword(), dbMember.getPassword());
}

• authentication.getName()(사용자의 ID)와 member 객체의 ID가 다르면 접근 권한이 없음 false로 반환하고 DB에 해당 멤버의 ID가 조회되지 않아도 false로 반환하고 조회되어 사용자가 입력한 비밀번호화 DB에 조회된 멤버의 비밀번호가 일치하지 않으면 false를 반환하여 권한이 없음을 나타냅니다.

MemberView.jsx(React)

const account = useContext(LoginContext);

function handleDeleteClick() {
  setIsLoading(true);
  axios
    .delete(`/api/member/${id}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
      data: { id, password },
    })
    .then((res) => {
      toast({
        status: "success",
        description: `${member.id}님이 탈퇴하였습니다. `,
        position: "top-right",
        duration: 1000,
      });
      account.logout();
      navigate("/");
    })
    .catch((err) => {
      toast({
        status: "error",
        description: `올바른 비밀번호가 아닙니다.`,
        position: "top-right",
        duration: 1000,
      });
    })
    .finally(() => {
      setIsLoading(false);
      setPassword("");
      onClose();
    });
}

• account.logout() : 탈퇴시 로그아웃 되게 합니다.

🥹 회원 삭제 시, 이미 게시글이 있는 회원은 삭제가 안됨...

MemberService.java

public void delete(Integer id) {
    // board 테이블에서 작성한 글 지우기
    boardMapper.deleteByMemberId(id);

    // board 지운 후 member 테이블 지우기
    mapper.deleteById(id);
}

• 회원 탈퇴 시, 해당 회원의 게시물을 지워지고 탈퇴가 되어서 순서대로 로직을 작성합니다.
• board에서 board의 id를 삭제시키고 member의 id를 삭제시켜 회원을 탈퇴시킵니다.

BoardMapper.java

    @Delete("""
            DELETE FROM board
            WHERE member_id=#{memberId}
            """)
    int deleteByMemberId(Integer memberId);

• 삭제하고 싶은 member 테이블의 id를 board 테이블에서 memberId를 삭제시킵니다.

axios 토큰을 계속해서 추가시켜줘야 하니 번거로워 App.jsx 파일에 axios interceptor 설정을 해주었다.

// axios interceptor 설정
axios.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.authorization = `Bearer ${token}`;
  }
  return config;
});

• 토큰이 존재할 때(null이 아닐 때)만 추가시킵니다.