[WALFI] BE/FE - Token으로 유저 정보 가져오기/ Reqct-query Cache 사용

1. Back-End (JavaSpringBoot)

 

table column 

여기서 user_id, email, name, birth_date, phone_number, 대표 계좌를 보내는 API를 만들거다. 

Domain 

 

이미 사용되고 있는 Entity 이기 때문에 기존에 작성되어 있던 UserDomain을 사용한다 '-^b

 

Repository

 

userId로 정보를 받아오는 findI()를 작성한다. 

    @Query(value = "select * from user where user_id = ?1", nativeQuery = true)
    User find(String userId);

 

 

Dto

 

userDto 변경없이 사용 ~.~

 

Service 추가

 

uerId로 user정보를 찾기. findById라는 걸 그냥 지원하는건가? 

package com.shinhan.walfi.service;

import com.shinhan.walfi.domain.User;
import com.shinhan.walfi.dto.TokenDto;
import com.shinhan.walfi.dto.UserDto;

import java.util.List;

public interface UserService {

	...


    UserDto findUserById(String userId);
}

Controller

 

다행히 기존에 짜놓은 코드 중에 token으로 어떤 정보를 가져오는 부분이 있었고, 이 부분을 참고했다.

   @PostMapping("/getinfo")
    @ApiOperation(value = "아이디에 해당하는 유저의 게임 정보를 가져오는 기능")
    public ResponseEntity<HttpResult> getUserGameInfo(@ApiIgnore @AuthenticationPrincipal User user){
        UserGameInfoDto userGameInfoDto = userGameInfoService.getUserGameInfo(user.getUserId());

        HttpResult res;
        res = HttpResult.getSuccess();
        res.setData(userGameInfoDto);

        return ResponseEntity.status(res.getStatus()).body(res);
    }

 

1. Post 타입으로 받으며, Token으로 확인한다. 

@ApiIgnore : Swagger에서 파라미터를 확인하지 못하도록 함. 

@AuthenticationPricipal : Spring Security 3.2부터 Custom 로그인 객체를 가져올 수 있게 함. 

• JWT는 Token id + password + 특정 숫자 값을 확인하고, 확인된 Authentication 객체를  SecurityContext에 저장한다. @AuthenticationPricipla은 이 SecurityContextHolder에 저장된 인증 객체의 principal을 가져와 사용하는 것.

2. 받아온 DB 정보를 Dto 형태로 변경하고, HttpResult 세팅 후 return 

  @ApiOperation(value = "유저 정보 조회")
    @PostMapping("/userinfo")
    public ResponseEntity<HttpResult> getUserInfo(@ApiIgnore @AuthenticationPrincipal User user){
        UserDto userInfo = userService.findUserById(user.getUserId());

        HttpResult res;
        res = HttpResult.getSuccess();
        res.setData(userInfo);

        return ResponseEntity.status(res.getStatus()).body(res);

    }

 

잘 도착하는 모습 ^_^

 

 

---

 

2. Front-End (Next, React-Query)

홈에서 정보를 받아와서 해야 하는 부분은 총 4부분이다. 현재 symentic-markup 으로 한다고 부분 부분 쪼개서 넣어놨고 전역 상태 관리 라이브러리 ( redux, recoil) 이 빠져 있는 상태기 때문에, 두가지 방법이 있는데, 캐시로 진행하려 한다. props는 쫌 ^.^

 

1) 상위 컴포넌트에서 props로 전달

2) 하위 컴포넌트에서 따로 reactquery cache 받아오기 

 

 

 

 

 

 

 

 

 

https://wildeveloperetrain.tistory.com/324

@AuthenticationPrincipal 동작 원리와 사용 예시

https://itvillage.tistory.com/60

JWT 자격 검증 시, SecurityContext는 언제 비워(clear)질까?