Code - jhpark/cms

<template> <div class="login-page page"> <div> <div class="background-img"> <p> 어서오세요.<br /> 로그인하세요. </p> </div> <div class="login-wrap"> <div class="login"> <div :class="{ 'login-title': true, 'user-login': !isAdminPage, }" > LOGIN </div> <div class="form-group"> <label for="id" class="login-label">아이디</label> <input type="text" name="" id="id" class="form-control md" placeholder="아이디를 입력하세요" v-model="member['lgnId']" /> </div> <div class="form-group"> <label for="pw" class="login-label">비밀번호</label> <input type="password" name="" id="pw" class="form-control md" placeholder="비밀번호를 입력하세요" v-model="member['pswd']" @keydown.enter="fnLogin" /> </div> <button class="btn md main user-btn" v-if="!isAdminPage" @click="fnLogin" @keydown.enter="fnLogin" > 로그인 </button> <button class="btn md main" v-else @click="fnLogin" @keydown.enter="fnLogin" > 로그인 </button> <div class="input-group" v-if="!isAdminPage" > <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p> <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p> </div>  </div> </div> </div> </div> </template> <script> import { useStore } from "vuex"; import store from "../AppStore"; import { loginProc, oauthLogin, getOAuthUserInfo } from "../../../resources/api/login"; import queryParams from "../../../resources/js/queryParams"; export default { mixins: [queryParams], data: () => { return { member: { lgnId: null, pswd: null, }, store: useStore(), isAdminPage: false, }; }, methods: { checkAdminPage() { if ( this.restoreRedirect("redirect") && this.restoreRedirect("redirect").includes("/adm/") ) { this.isAdminPage = true; } else { this.isAdminPage = false; } }, // OAuth2 로그인 처리 (API 모듈 사용) fnOAuthLogin(provider) { const redirectUrl = this.restoreRedirect("redirect") || this.$route.fullPath; sessionStorage.setItem('oauth_redirect', redirectUrl); oauthLogin(provider); }, async fnLogin() { try { const res = await loginProc(this.member); if (res.status == 200) { const loginType = res.headers['login-type']; // 세션/토큰 로그인 구분 if (loginType === 'J') { // JWT 방식 const token = res.headers.authorization; store.commit("setAuthorization", token); store.commit("setLoginMode", "J"); // localStorage에도 저장 localStorage.setItem("authorization", token); localStorage.setItem("loginMode", "J"); const base64String = token.split(".")[1]; const base64 = base64String.replace(/-/g, "+").replace(/_/g, "/"); const jsonPayload = decodeURIComponent( atob(base64).split("").map((c) => { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }).join("") ); const mbr = JSON.parse(jsonPayload); store.commit("setMbrId", mbr.mbrId); store.commit("setMbrNm", mbr.mbrNm); store.commit("setRoles", mbr.roles); // localStorage에 사용자 정보도 저장 localStorage.setItem("mbrId", mbr.mbrId); localStorage.setItem("mbrNm", mbr.mbrNm); localStorage.setItem("roles", JSON.stringify(mbr.roles)); } else if (loginType === 'S') { store.commit("setLoginMode", "S"); localStorage.setItem("loginMode", "S"); const mbr = res.data; store.commit("setAuthorization", null); store.commit("setMbrId", mbr.mbrId); store.commit("setMbrNm", mbr.mbrNm); const roles = mbr.roles.map(r => ({ authority: r.authrtCd })); store.commit("setRoles", roles); // localStorage에 세션 정보도 저장 localStorage.setItem("mbrId", mbr.mbrId); localStorage.setItem("mbrNm", mbr.mbrNm); localStorage.setItem("roles", JSON.stringify(roles)); } else { alert("알 수 없는 로그인 방식입니다."); return; } // 페이지 이동 처리 await this.handleLoginSuccess(); } } catch (error) { console.error("로그인 에러:", error); alert(error.response?.data?.message || "로그인에 실패했습니다."); } }, // 로그인 성공 후 페이지 이동 처리 async handleLoginSuccess() { const isAdmin = store.state.roles.some(role => role.authority === "ROLE_ADMIN"); let redirectUrl = this.restoreRedirect("redirect"); if (redirectUrl && redirectUrl !== "") { // 특정 페이지들은 메인으로 리다이렉트 if (redirectUrl.includes("/searchId.page") || redirectUrl.includes("/resetPswd.page") || redirectUrl.includes("/login.page")) { redirectUrl = this.$filters.ctxPath("/"); } // Context Path 처리 if (!redirectUrl.startsWith(store.state.contextPath) && store.state.contextPath) { redirectUrl = this.$filters.ctxPath(redirectUrl); } // 라우터에 해당 경로가 존재하는지 확인 const routeExists = this.$router.getRoutes().some(route => route.path === redirectUrl); if (routeExists) { await this.$nextTick(); this.$router.push({ path: redirectUrl }); } else { const defaultPath = isAdmin ? this.$filters.ctxPath("/adm/main.page") : this.$filters.ctxPath("/"); this.$router.push({ path: defaultPath }); } } else { const defaultPath = isAdmin ? this.$filters.ctxPath("/adm/main.page") : this.$filters.ctxPath("/"); await this.$nextTick(); this.$router.push({ path: defaultPath }); } // redirect 세션 정리 sessionStorage.removeItem("redirect"); }, moveSearchId() { this.$router.push({ path: this.$filters.ctxPath("/resetPswd.page"), query: { tab: "id", }, }); }, moveResetPswd() { this.$router.push({ path: this.$filters.ctxPath("/resetPswd.page"), query: { tab: "pw", }, }); }, // OAuth2 로그인 성공 후 처리 async handleOAuthCallback() { const urlParams = new URLSearchParams(window.location.search); const error = urlParams.get('error'); if (error) { alert('소셜 로그인에 실패했습니다: ' + decodeURIComponent(urlParams.get('message') || error)); return; } // URL에 OAuth 관련 파라미터가 있는 경우 if (this.$route.query.oauth_success) { try { console.log("OAuth2 로그인 성공! 간단한 세션 처리를 시작합니다."); // OAuth는 일반적으로 세션 방식이므로 세션으로 설정 store.commit("setLoginMode", "S"); localStorage.setItem("loginMode", "S"); // 기본 사용자 정보 설정 - 서버에서 세션에 저장된 정보 사용 // 실제 사용자 정보는 다른 API나 페이지 로드 시 가져올 수 있음 const defaultMbrId = 'oauth_user_' + Date.now(); // 임시 ID const defaultMbrNm = 'OAuth 사용자'; const defaultRoles = [{ authority: 'ROLE_USER' }]; store.commit("setAuthorization", null); store.commit("setMbrId", defaultMbrId); store.commit("setMbrNm", defaultMbrNm); store.commit("setRoles", defaultRoles); // localStorage에 정보 저장 localStorage.setItem("mbrId", defaultMbrId); localStorage.setItem("mbrNm", defaultMbrNm); localStorage.setItem("roles", JSON.stringify(defaultRoles)); console.log("OAuth 세션 로그인 완료 - Store 상태:", { authorization: store.state.authorization, mbrId: store.state.mbrId, mbrNm: store.state.mbrNm, roles: store.state.roles, loginMode: store.state.loginMode }); // 페이지 이동 처리 await this.$nextTick(); // 리다이렉트 URL 처리 const redirectUrl = sessionStorage.getItem('oauth_redirect'); sessionStorage.removeItem('oauth_redirect'); if (redirectUrl && redirectUrl !== '/login' && !redirectUrl.includes('/login.page')) { console.log("OAuth 리다이렉트:", redirectUrl); this.$router.replace({ path: redirectUrl }); } else { // 메인 페이지로 이동 const mainPath = this.$filters.ctxPath("/"); console.log("OAuth 메인 페이지로 이동:", mainPath); this.$router.replace({ path: mainPath }); } } catch (error) { console.error('OAuth 콜백 처리 실패:', error); alert('OAuth 로그인 처리 중 오류가 발생했습니다: ' + (error.message || '알 수 없는 오류')); // 에러 발생 시 로그인 페이지로 이동 store.commit("setStoreReset"); this.$router.push({ path: this.$filters.ctxPath("/login.page") }); } } } }, watch: {}, computed: {}, components: {}, created() { this.checkAdminPage(); // OAuth2 콜백 처리 this.handleOAuthCallback(); }, mounted() {}, }; </script>