💻 코딩 일기 : [스프링 게시판 with React] '권한 설정 및 토큰' 편

🔔 '권한 설정 및 토큰'에 대해서 알아보자!

💟 회원목록 admin일 때만 볼 수 있게 변경

권한 테이블

## 권한 테이블
CREATE TABLE authority
(
    member_id INT         NOT NULL REFERENCES member (id),
    name      VARCHAR(20) NOT NULL,
    PRIMARY KEY (member_id, name)
);

• member_id를 맏아서 권한을 지정해주기 위해 권한 테이블을 작성합니다.

MemberController.java

    @GetMapping("list")
    @PreAuthorize("hasAuthority('SCOPE_admin')")
    public List<Member> list() {
        return service.list();
    }

• @PreAuthorize("hasAuthority('SCOPE_admin')")을 사용해서 admin 권한을 가진 사람만 회원 목록을 볼 수 있게 합니다.

MemberService.java

    public Map<String, Object> getToken(Member member) {

        Map<String, Object> result = null;

        Member db = mapper.selectByEmail(member.getEmail());

        if (db != null) {
            if (passwordEncoder.matches(member.getPassword(), db.getPassword())) {
                result = new HashMap<>();
                String token = "";
                List<String> authority = mapper.selectAuthorityByMemberId(db.getId());
                String authorityString = authority.stream().collect(Collectors.joining(" "));

                // 토큰 만드는 코드
                JwtClaimsSet claims = JwtClaimsSet.builder()
                        .issuer("self")
                        .issuedAt(Instant.now())
                        .expiresAt(Instant.now().plusSeconds(60 * 60 * 24 * 7)) //일주일
                        .subject(db.getId().toString())
                        .claim("scope", authorityString) //권한
                        .claim("nickName", db.getNickName())
                        .build();
                token = jwtEncoder.encode(JwtEncoderParameters.from(claims)).getTokenValue();
                result.put("token", token);
            }
        }
        return result;
    }

• mapper.selectAuthorityByMemberId(db.getId()) : 데이터베이스에서 주어진 멤버 ID에 대한 권한을 리스트로 가져옵니다.
• 가져온 권한 리스트를 공백으로 구분된 하나의 문자열로 합칩니다.

MemberMapper.java

    @Select("SELECT name FROM authority WHERE member_id = #{memberId}")
    List<String> selectAuthorityByMemberId(Integer memberId);

• 권한 테이블에서 member의 id로 해당 권한을 조회합니다.

💟 admin 권한 설정

회원 목록 admin 권한만 접근 가능

LoginProviedr.jsx

const [authority, setAuthority] = useState([]);
  function isAdmin() {
    return authority.includes("admin");
  }

• authority 배열에 admin 권한이 포함되었는지 확인합니다.

Navbar.jsx(React)

{account.isAdmin() && (
        <Box
          onClick={() => navigate("/member/list")}
          cursor={"pointer"}
          _hover={{ bgColor: "gray.200" }}
        >
          회원목록
        </Box>
      )}

• admin일 경우에만 Navbar에서 회원목록을 보이게 합니다.

MemberService.java

    public boolean hasAccess(Integer id, Authentication authentication) {
        boolean self = authentication.getName().equals(id.toString());
        boolean isAdmin = authentication.getAuthorities().stream().anyMatch(a -> a.getAuthority().equals("SCOPE_admin"));
        return self || isAdmin;

    }

• 계정 정보를 자신만 보거나 admin만 볼 수 있도록 설정해줍니다.

MemberView.jsx

{account.hasAccess(member.id) && (
        <Box mt={"30px"}>
          <Button
            ml={"10px"}
            onClick={() => navigate(`/member/edit/${member.id}`)}
            colorScheme={"green"}
          >
            수정
          </Button>
          <Button ml={"10px"} onClick={onOpen} colorScheme={"red"}>
            탈퇴
          </Button>
        </Box>
      )}

• member의 id가 해당 계정의 id가 맞을 때만 정보 보기에게만 수정/탈퇴 버튼 보이기

💟 닉네임 수정 후 navbar에 반영

MemberController.java

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

• 수정 권한을 가지고 있다면 수정 메서드를 호출하여 수정된 회원 정보와 인증된 사용자에 대한 정보를 result에 담아 결과를 클라이언트에게 보냅니다.

MemberService.java

   public Map<String, Object> modify(Member member, Authentication authentication) {
        ~~~~

        String token = "";

        Jwt jwt = (Jwt) authentication.getPrincipal();
        Map<String, Object> claims = jwt.getClaims();
        JwtClaimsSet.Builder jwtClaimsSetBuilder = JwtClaimsSet.builder();
        claims.forEach(jwtClaimsSetBuilder::claim);
        jwtClaimsSetBuilder.claim("nickName", member.getNickName());

        JwtClaimsSet jwtClaimsSet = jwtClaimsSetBuilder.build();
        token = jwtEncoder.encode(JwtEncoderParameters.from(jwtClaimsSet)).getTokenValue();
        return Map.of("token", token);
    }

• 회원 정보 수정이 완료된 후 클라이언트에게 토큰을 Map으로 담아 반환합니다.

1. Jwt jwt = (Jwt) authentication.getPrincipal();: 현재 인증된 사용자의 정보가 담긴 JWT를 가져옵니다.
2. Map<String, Object> claims = jwt.getClaims();: JWT에서 클레임(claim) 정보를 가져옵니다. 클레임은 토큰에 저장된 사용자 정보를 의미합니다.
3. JwtClaimsSet.Builder jwtClaimsSetBuilder = JwtClaimsSet.builder();: JWT 클레임 셋을 생성하기 위한 빌더를 초기화합니다.
4. claims.forEach(jwtClaimsSetBuilder::claim);: 가져온 클레임 정보를 반복하여 클레임 빌더에 추가합니다.
5. jwtClaimsSetBuilder.claim("nickName", member.getNickName());: 회원 정보 중 닉네임을 새로운 클레임으로 추가합니다.
6. JwtClaimsSet jwtClaimsSet = jwtClaimsSetBuilder.build();: 클레임 빌더로부터 최종적인 JWT 클레임 셋을 생성합니다.
7. token = jwtEncoder.encode(JwtEncoderParameters.from(jwtClaimsSet)).getTokenValue();: 생성한 클레임 셋을 이용하여 새로운 토큰을 인코딩합니다. 그리고 해당 토큰의 값을 가져와 변수에 저장합니다.
8. return Map.of("token", token);: 생성된 토큰을 "token" 키와 함께 맵 형태로 반환합니다. 이 토큰은 클라이언트에서 새로운 인증에 사용될 것입니다.

MemberEdit.jsx(React)

function handleClickSave() {
    axios
      .put("/api/member/modify", { ...member, oldPassword })
      .then((res) => {
        toast({
          status: "success",
          description: "회원 정보가 수정되었습니다.",
          position: "top",
        });
        account.login(res.data.token);
        navigate(`/member/${id}`);
      })
      ~~~
  }

• account.login(res.data.token) : 요청이 성공하면 서버로부터 받은 토큰을 사용하여 사용자를 로그인 상태로 설정하는 것입니다. 즉, 클라이언트가 새로운 토큰을 받으면 해당 토큰을 사용하여 사용자를 로그인하고, 이를 통해 사용자는 로그인 상태를 유지하며 서비스를 계속 이용할 수 있습니다.