웹 개발/[KLOZ] 웹 프로젝트

[KLOZ] getUserId.do쓰지않고 session 과 thymeleaf 이용해서 사용자 정보 출력

cha430 2025. 6. 26. 14:37

 

Session에 UserId, displayName, positon 을 저장해서 값을 가져다가 화면에 출력하는 메서드를 getUserId.do 요청으로 실행했었는데, 불필요한 자원낭비라고 한다.

한 번 더 서버를 갔다와야하니까 ....

 

그래서 session이용하는 방법으로 변경했다.

 

session에 저장한 사용자정보를 Model에 담고 thymeleaf가 이 정보를 토대로 HTML을 동적으로 생성한다.

빌드하면 HTML파일이 브라우저에 전송되면서 사용자정보를 읽어올 수 있다고 한다.

 

그리고 이때 로그인하고나서 넘어가는 화면 html 에 짜야한다.

 

	@GetMapping("/main.html")
	public String main(){

		return "main/main";
	}

 

기존에 main.vue만 출력하던 컨트롤러 로직에서 아래처럼 Model에 사용자 정보 담아서

thymeleaf가 동적으로 HTML 생성할 때 사용자정보 끼워넣게 한다.

 

	@GetMapping("/main.html")
	public String main(HttpServletRequest request, HttpSession session, Model model){

		SessionInfo sessionInfo = new SessionInfo(request);
		String sUserId = sessionInfo.getUserId();
		String displayName = (String)session.getAttribute("displayName", displayName);
		String position = (String)session.getAttribute("position", position);

		if(sUserId != null && !sUserId.isEmpty()) {
			model.addAttribute("userId", sUserId);
			model.addAttribute("displayName", displayName != null ? displayName : "");
			model.addAttribute("position", position != null ? position : "");

			return "main/main.html";
		} else {
			return "redirect:/login/login.html";
		}
		return "main/main";
	}
}

 

main.html 에 해당 내용 추가

templates 안으로 복사되게 경로 지정해야 함

<html lang="ko"
      xmlns:th="http://www.thymeleaf.org">
<head>


<script type="module" crossorigin src="../assets/main-DF6Hr7ZT.js">
      window.userInfo= {
          userId: "[[${userId}]]" || "dev_user",
          displayName: "[[${displayName}]]"|| "개발자",
          position: "[[${position}]]"|| "사원"
      };

  </script>