1. Vue 프론트단
세션 가져다 쓰는 방법
일단 html, js 파일을 만든다.
// session.html
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="session">
<input id="s_custName" type="hidden" th:value="${session.session_cust_name}">
<input id="s_custSeq" type="hidden" th:value="${session.session_cust_seq}">
<input id="s_userId" type="hidden" th:value="${session.session_user_id}">
<input id="s_userSeq" type="hidden" th:value="${session.session_user_seq}">
<input id="s_userName" type="hidden" th:value="${session.session_user_name}">
<input id="s_isAdmin" type="hidden" th:value="${session.session_is_admin}">
<input id="s_userEmail" type="hidden" th:value="${session.session_user_email}">
<input id="s_isDebug" type="hidden" th:value="${session.session_is_debug}">
<input id="s_isExpire" type="hidden" value="">
<input id="s_isLive" type="hidden" value="">
</div>
</body>
</html>
// sessionInfo.js
const isDev = process.env.NODE_ENV === "development"
export const sessionInfo = {
custName: isDev?"클로즈":document.getElementById("s_custName").value,
custSeq: isDev?0:parseInt(document.getElementById("s_custSeq").value),
userId: isDev?"rasachu@kloz.dev":document.getElementById("s_userId").value,
userSeq: isDev?1:parseInt(document.getElementById("s_userSeq").value),
userName: isDev?"라사추":document.getElementById("s_userName").value,
isLive: isDev?0:parseInt(document.getElementById("s_isLive").value),//-- SpringBoot에 연결 했을때 spring profile이 live면 1 아니면 0
isDebug: isDev?1: parseInt(document.getElementById("s_isDebug").value),
isAdmin: isDev?1:parseInt(document.getElementById("s_isAdmin").value),
// locale: isDev?"en":document.getElementById("s_locale").value,
}
1) Spring + Thymeleaf에서 hidden input 생성
여기서 ${session.session_user_seq}는 스프링 세션에 저장된 데이터.
→ 서버에서 HTML 생성할 때 해당 값이 숫자든 문자열이든 그대로 input value에 들어감.
2) Vue/JS가 index.html(또는 thymeleaf html)을 로드
Vue가 mount되기 전에 브라우저가 HTML을 읽음.
→ hidden input이 이미 DOM 상에 존재.
3) sessionInfo.js가 DOM에서 직접 값을 읽음
→ HTML에 있는 <input id="s_userSeq" ...>에서 value를 읽어와서 userSeq로 저장.
이건 Vue 앱을 띄우기 전에 실행되므로 sessionInfo는 Vue 전역에서 항상 사용 가능해짐.
사용할 곳에서 import하고 쓰면 끝..
import {sessionInfo} from "@/assets/js/common/sessionInfo.js";
사용 예)
const isAdmin = sessionInfo.isAdmin; const isWriterOnly = computed(() => {
return Number(regUserSeq.value) === Number(sessionInfo.userSeq);
})
2. 백단
sessionKeys 등 enum 생성
(자바의 열거형. Enumeration)
package dev.kloz.weborder.common.session;
import lombok.RequiredArgsConstructor;
@RequiredArgsConstructor
public enum SessionKeys {
session_user_seq,
session_user_id,
session_cust_seq,
session_cust_name,
session_user_name,
session_user_password,
session_user_email,
session_last_change_pw_date,
session_remark,
session_is_admin,
session_is_debug;
}
/**
* 세션 관리 클래스
*
*/
package dev.kloz.weborder.common.session;
import dev.kloz.weborder.common.util.RequestUtils;
import dev.kloz.weborder.common.dto.UserDto;
public class SessionManager {
public SessionManager(UserDto userVo) {
put(SessionKeys.session_user_seq, userVo.getUserSeq());
put(SessionKeys.session_user_id, userVo.getUserId());
put(SessionKeys.session_cust_seq, userVo.getCustSeq());
put(SessionKeys.session_cust_name, userVo.getCustName());
put(SessionKeys.session_user_name, userVo.getUserName());
put(SessionKeys.session_remark, userVo.getRemark());
put(SessionKeys.session_last_change_pw_date, userVo.getLastChangeDate());
put(SessionKeys.session_user_email, userVo.getUserEmail());
put(SessionKeys.session_is_admin, userVo.getUserAuth() == 2 ? 1 : 0);
put(SessionKeys.session_is_debug, 0);
}
private static boolean exists(final SessionKeys sessionKeys) {
return RequestUtils.getSession().getAttribute(sessionKeys.name()) != null;
}
public static void put(SessionKeys sessionKeys, Object obj) {
RequestUtils.getSession().setAttribute(sessionKeys.name(), obj);
}
public static Object get(final SessionKeys sessionKeys) {
return exists(sessionKeys) ? RequestUtils.getSession().getAttribute(sessionKeys.name()) : null;
}
public static void invalidate(final SessionKeys sessionKeys) {
RequestUtils.getSession().removeAttribute(sessionKeys.name());
}
public static void invalidateAll() {
RequestUtils.getSession().invalidate();
}
}
그리고 이렇게 사용.
보통 object이기 때문에
String.valueOf 로 String 으로 바꿔주고
Integer.parseInt 로 int 로 바꿔서 쓴다.
Integer userSeq = Integer.parseInt(String.valueOf(SessionManager.get(SessionKeys.session_user_seq)));
'웹 개발 > [KLOZ] 웹 프로젝트' 카테고리의 다른 글
| [WebOrder] Vuetify scrollable, 스크롤 시 버튼 고정 방법 (0) | 2025.11.26 |
|---|---|
| [WebOrder] vueper-slides : 트랜지션 transition 조건부 처리. (0) | 2025.11.20 |
| [WebOrder] 다국어 처리 (VueDatePicker, IBSheet) (0) | 2025.10.21 |
| [WebOrder] 이미지 출력 (Vue dialog, IBSheet) (0) | 2025.09.30 |
| [WebOrder] CodeHelp 이용 (v-model, onChange) (0) | 2025.09.26 |