Mypage-로그인 관리(로그이력)

로그인관리 섹션에서는 마지막 로그인날짜와 접속한 서버의 ip주소를 기록하여 내역을 나타내고,

날짜 선택기를 사용하여 날짜별로 이력을 검색할 수 있게 구현했다.

*** IP 주소가 127.0.0.1로 나타나는 이유

• 로컬 개발 환경에서 애플리케이션을 실행하고 있기 때문에 IP 주소가 127.0.0.1로 나타난다.로컬호스트(127.0.0.1)는 자신의 컴퓨터를 가리키는 IP주소로, 이는 네트워크를 통해 컴퓨터 내부에서만 통신할 때 사용 된다. 
• 로컬 개발 환경 : 애플리케이션을 localhost주소와 포트(8080)로 실행하면 모든 네트워크 요청은 자신의 컴퓨터 내에서만 이루어진다. 클라이언트가 요청하는 출발지 주소와 받는 곳도 자기 자신이 되어서 127.0.0.1로 기록이 된다!

로그인 기록을 조회하기 전에! 로그인 요청(signIn)메서드에 아래의 코드를 추가해준다.

if (!isAdmin) { // 일반 사용자일 경우에만 로그인 기록을 저장
    // IP 주소 가져오기
    Long userNo = jwtUtil.getUserNoFromToken(token);
    String userIp = ClientIpUtil.getClientIp();

    // 로그인 기록 저장
    UserDTO userDTO = new UserDTO();
    userDTO.setNo(userNo);
    userDTO.setUserIp(userIp);
    userDTO.setLastLoginDate(LocalDateTime.now()); // 현재시간

    memberServiceImpl.saveLoginLog(userDTO); // 로그기록 저장
}

• ClientIpUtil : 클라이언트의 IP 주소를 가져오는 유틸리티 메서드를 제공하는 클래스
• memberServiceImpl.saveLoginLog(userDTO) : 로그인 할때 ip주소를 가져와서 로그인 기록을 저장을 해주는 메서드

이렇게 위 코드를 작성해줘야 마이페이지에서 로그인 기록을 조회를 해올수 있다!

$.ajax({
    type: 'POST',
    url: '/login-log',
    contentType: 'application/json',
    success: function(data) {
        if (data.logs && data.logs.length > 0) {
            logsData = data.logs; // 데이터를 저장
            filterLogsByDate(); // 초기 로딩 시 날짜 필터 적용
        }
    },
    error: function(error) {
        console.error('로그인 로그 데이터를 불러오는 중 오류가 발생했습니다:', error);
    }
});

• /login-log URL로 POST 요청  -> 사용자의 로그인 기록(data)는 서버에서 반환된 응답 데이터를 가져온 것이다.
•  data.logs: 서버에서 반환된 로그인 로그 데이터를 포함하고, 로그가 존재하면 logsData 변수에 저장하고, filterLogsByDate 함수를 호출하여 날짜 필터를 적용

// 마이페이지 로그 기록 조회
@PostMapping("/login-log")
@ResponseBody
public Map<String, Object> viewLoginLog(@CookieValue(value = "Authorization", required = false) String token) {
    Map<String, Object> response = new HashMap<>();
    try {
        // 사용자 식별
        Long userNo = jwtUtil.getUserNoFromToken(token);

        // 로그인 로그 조회
        List<UserDTO> logs = memberServiceImpl.loginLog(userNo);

        // 조회된 로그를 응답에 추가
        response.put("logs", logs);
        response.put("success", true);
    } catch (Exception e) {
        response.put("success", false);
        response.put("error", "로그인 기록을 불러오는 중 오류가 발생했습니다.");
    }
    return response;
}

• @ResponseBody : 메서드의 반환 값을 JSON 형태로 응답
• memberServiceImpl.loginLog(userNo) : userNo를 매개변수로 받아 해당 사용자의 로그인 로그를 조회하는 메서드
• response.put("logs", logs) : 조회된 로그인 로그를 응답에 추가 -> logs는 memberServiceImpl.loginLog(userNo) 호출로 얻은 로그인 기록 데이터

이렇게 위 코드가 모두 정상적으로 작동이 되고, 성공응답을 반환했다면! 위의 이미지처럼 로그인할 때마다 로그인을 한 날짜와 서버IP 주소가 기록될 것이다. 

 

정리를 해보자면!!!

 

로그인 시:

• 사용자가 로그인할 때, 해당 사용자의 로그인 기록이 데이터베이스에 존재하지 않는 경우, 새 로그 기록이 삽입되고, 이를 통해 사용자의 로그인 이력이 데이터베이스에 적절히 기록된다.

마이페이지:

• 사용자가 마이페이지를 방문하면, 데이터베이스에 저장된 로그인 기록이 조회되어 화면에 표시된다. 따라서, 사용자는 자신의 로그인 이력을 마이페이지에서 확인할 수 있게 됩니다!!!!!!!!!!!!!!!