+import apiClient from "./index";

+

+export const check2ndAuthProc = email => {

+    return apiClient.post(`/sys/email/check2ndAuthEmailVerifyCode.json`, email);

+}

+

+export const sendAuthEmailProc = email => {

+    return apiClient.post(`/sys/email/sendEmailVerifyCode.json`, email);

+}(파일 끝에 줄바꿈 문자 없음)

+    // if (!isLogin && to.path !== filters.ctxPath('/login.page')) {

+    //   sessionStorage.setItem('redirect', to.fullPath); 

+    //   next({ path: filters.ctxPath("/login.page") });

+    //   return; 

+    // }

+      });

+      if(admPath) {

+        // sessionStorage.setItem("redirect", to.fullPath);

+        next({ path: filters.ctxPath("/cmslogin.page") });

+      }

+    <div class="login-page page" :class="{ 'loading-blur': isLoading }" :style="{ 'cursor': isLoading ? 'wait' : 'default' }">

+        <div>

+            <div class="admin-background-img">

+                <p>

+                    콘텐츠 관리 시스템에 오신 것을 환영합니다.<br />

+                    원활한 관리와 운영을 위해 로그인하세요.

+                </p>

+            </div>

+            <div class="login-wrap" v-if="!loginStep1 && !loginStep2">

+                <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 class="login-wrap" v-else-if="loginStep1 && !loginStep2">

+                <div>

+                    <p>인증코드 입력</p>

+                </div>

+                <div>

+                    <p>{{memberInfo.email}}로 전송된 6자리 인증코드를 입력하세요.</p>

+                    <input type="text" class="form-control md" ref="code" @input="inputCode" v-model="memberInfo.code" maxlength="6" placeholder="인증코드를 입력하세요."/>

+                </div>

+                <div class="btn-wrap">

+                    <button class="btn sm main" @click="fnCheck">인증코드 확인</button>

+                </div>

+                <div>

+                    <p>인증코드를 받지 못하셨나요?</p>

+                    <button class="btn sm tertiary" @click="fnResend">인증코드 다시받기</button>

+                </div>

+    </div>

+import { check2ndAuthProc, sendAuthEmailProc } from "../../../resources/api/email";

+    mixins: [queryParams],

+    data: () => {

+        return {

+            isLoading: false,

+            member: {

+                lgnId: null,

+                pswd: null,

+                lgnReqPage: 'A'

+            },

+            store: useStore(),

+            isAdminPage: false,

+            memberInfo: {

+                email: '', // 이메일

+                code: '', // 인증코드

+            },

+

+            // 인증 절차

+            loginStep1: false, // 1차 인증

+        };

+    methods: {

+        init() {

+            this.member = {

+                lgnId: null,

+                pswd: null,

+                lgnReqPage: 'A'

+            };

+            this.memberInfo = {

+                mbrId: '',

+                email: '',

+                code: '',

+            };

+            this.loginStep1 = false;

+        checkAdminPage() {

+            if (

+                this.restoreRedirect("redirect") &&

+                this.restoreRedirect("redirect").includes("/adm/")

+            ) {

+                this.isAdminPage = true;

+            } else {

+                this.isAdminPage = false;

+            }

+        async fnLogin() {

+            this.isLoading = true;

+            try {

+                const res = await loginProc(this.member);

+                if (res.status == 200) {

+                    this.memberInfo = res.data; // 인증코드 전송을 위한 이메일 정보 저장

+                    this.loginStep1 = true; // 1차 인증 성공

+                }

+            } catch (error) {

+                const errorData = error.response.data;

+                if (errorData.message != null && errorData.message != "") {

+                    alert(error.response.data.message);

+                } else {

+                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");

+                }

+            } finally {

+                this.isLoading = false;

+            }

+        },

+        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",

+                },

+            });

+        },

+

+        // 인증코드 입력

+        inputCode(event) {

+            const input = event.target.value.replace(/[^0-9]/g, '');

+            this.code = input;

+        },

+

+        // 인증코드 확인

+        async fnCheck() {

+            const res = await check2ndAuthProc(this.memberInfo);

+            if (res.status == 200) {

+                const loginType = res.headers['login-type']; // 세션/토큰 로그인 구분

+                if (loginType === 'J') {

+                    // JWT 방식

+                    store.commit("setAuthorization", res.headers.authorization);

+                    store.commit("setLoginMode", "J");

+                    localStorage.setItem("loginMode", "J");

+                    const base64String = store.state.authorization.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);

+                } 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);

+                } else {

+                    alert("알 수 없는 로그인 방식입니다.");

+                    return;

+                }

+                const isAdmin = store.state.roles.some(role => role.authority === "ROLE_ADMIN");

+                let url = this.restoreRedirect("redirect");

+                if (url != null && url != "") {

+                    const ctx = store.state.contextPath;

+                    if (ctx !== "") {

+                        // redirect 값에서 Context Path 추가

+                        url = this.$filters.ctxPath(url);

+                    } else {

+                        // redirect 값에서 기존 Context Path 제거

+                        url = url.replace(/^\/[^\/]+/, ""); // 첫 번째 '/' 이후의 경로만 남김

+                    }

+                    const routeExists = this.$router.getRoutes().some(route => route.path === url);

+

+                    if (url == this.$filters.ctxPath("/searchId.page") || url == this.$filters.ctxPath("/resetPswd.page")) {

+                        this.$router.push({ path: this.$filters.ctxPath("/main.page") });

+                    } else if (routeExists) {

+                        this.$router.push({ path: url });

+                    } else {

+                        this.$router.push({

+                            path: isAdmin ? this.$filters.ctxPath("/adm/main.page") : this.$filters.ctxPath("/")

+                        });

+                    }

+                } else {

+                    this.$router.push({

+                        path: isAdmin ? this.$filters.ctxPath("/adm/main.page") : this.$filters.ctxPath("/")

+                    });

+                }

+            } else {

+                const errorData = error.response.data;

+                if (errorData.message != null && errorData.message != "") {

+                    alert(error.response.data.message);

+                } else {

+                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");

+                }

+            }

+        },

+

+        // 인증코드 재전송

+        async fnResend() {

+            this.isLoading = true;

+            try {

+                const res = await sendAuthEmailProc(this.memberInfo);

+                if (res.status == 200) {

+                    alert(res.data.message);

+                }

+            } catch (error) {

+                const errorData = error.response.data;

+                if (errorData.message != null && errorData.message != "") {

+                    alert(error.response.data.message);

+                } else {

+                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");

+                }

+            } finally {

+                this.isLoading = false;

+            }

+        },

+    watch: {},

+    computed: {},

+    components: {},

+    created() {

+        this.init();

+        this.checkAdminPage();

+    },

+    mounted() { },

+

+<style scoped>

+.loading-blur {

+    pointer-events: none;

+    opacity: 0.4;

+    filter: grayscale(20%) blur(1px);

+}

+</style>