<template> <div class="login-container"> <div class="login "> <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div> <div class="login-box"> <div class="flex align-center justify-start mb40"> <img src="../resources/img/icon1.png" alt="" class="mr20"> <h2> 로그인 하기</h2> </div> <form @submit.prevent="submitForm" class="login-form "> <div class="mb30"> <p class="mb15 title" for="username">아이디</p> <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <div> <p class="mb15 title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/button.png" alt=""> <p>로그인</p> </button> <div class="flex justify-between mt40"> <button> <p class="underline title2" @click="buttonSearch">아이디/비밀번호 찾기</p> </button> <button> <p class="underline title2" @click="goToPage('Join')">회원가입</p> </button> </div> </form> </div> </div> </div> <div v-show="searchOpen" class="popup-wrap"> <div class="popup-box "> <div class="flex justify-end mb10"> <!-- <p class="popup-title">학교 검색</p> --> <button type="button" class="popup-close-btn" @click="closeBtn"> <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> </button> </div> <div class="tab-box" v-show="selectedTab !== 'tab3' && selectedTab !== 'tab4'"> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab1" /> 아이디 찾기 </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab2" /> 비밀번호 찾기 </label> </div> <!-- 아이디 찾기 --> <form @submit.prevent="submitForm" class="find-form mt30" v-if="selectedTab === 'tab1'"> <div class="mb20 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">이름</p> <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> </div> </div> <div class="flex justify-center "> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button @click="selectedTab = 'tab3'" type="button" title="글쓰기" class="new-btn"> 찾기 </button> </div> </form> <!-- 비밀번호 찾기 --> <form @submit.prevent="submitForm" class="find-form mt30" v-else-if="selectedTab === 'tab2'"> <div class="mb20 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">아이디</p> <input class="data-wrap" type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <div class="mb20 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">이름</p> <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> </div> </div> <div class="flex justify-center "> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button @click="selectedTab = 'tab4'" type="button" title="글쓰기" class="new-btn"> 찾기 </button> </div> </form> <!-- 아이디 찾기 결과 --> <div v-else-if="selectedTab === 'tab3'"> <div class="flex justify-center mt30"> <p class="title2">아이디 찾기가 완료 되었습니다.</p> </div> <table class="find-table mt30 mb30"> <tr> <td class="thead">이름</td> <td></td> </tr> <tr> <td class="thead">아이디</td> <td></td> </tr> </table> <div class="flex justify-center "> <button @click="closeBtn" type="button" title="글쓰기" class="new-btn"> 로그인 하기 </button> </div> </div> <!-- 비밀번호 찾기 결과 --> <div v-else-if="selectedTab === 'tab4'"> <div class="flex justify-center mt30"> <p class="title2">비밀번호 찾기가 완료 되었습니다.</p> </div> <table class="find-table mt30 mb30"> <tr> <td class="thead">이름</td> <td></td> </tr> <tr> <td class="thead">비밀번호</td> <td></td> </tr> </table> <div class="flex justify-center "> <button @click="closeBtn" type="button" title="글쓰기" class="new-btn"> 로그인 하기 </button> </div> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, mdiWindowClose } from '@mdi/js'; import axios from "axios"; import store from './pages/AppStore'; export default { data() { return { selectedTab: 'tab1', username: '', password: '', mdiWindowClose: mdiWindowClose, showModal: false, searchOpen: false, } }, methods: { submitForm() { console.log('Username:', this.username); console.log('Password:', this.password); const vm = this; axios({ url: "/auth/login.json", method: "post", data: { loginId: this.username, password: this.password, }, }).then(function (response) { const token = response.headers.get('Authorization'); const Refreshtoken = response.headers.get('RefreshToken'); store.dispatch('login', token); localStorage.setItem("Refreshtoken", Refreshtoken); vm.branchPage(); }).catch(function (error) { alert("아이디나 비밀번호가 잘못됐습니다 !"); console.log(error); }); }, branchPage() { const vm = this; const token = localStorage.getItem('token'); if (token) { // JWT 토큰을 '.'로 분리 const tokenParts = token.split('.'); if (tokenParts.length === 3) { const payload = tokenParts[1]; const base64 = payload.replace(/-/g, '+').replace(/_/g, '/'); // Base64 디코딩 후 UTF-8로 변환 const jsonPayload = decodeURIComponent( Array.prototype.map.call(atob(base64), c => { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('') ); const userInfo = JSON.parse(jsonPayload); // Vuex 스토어에 사용자 정보 저장 store.commit('setToken', token); store.commit('setUser', userInfo.usid); store.commit('setUserNm', userInfo.userNm); store.commit('setAuthcd', userInfo.author[0].authority); const roles = userInfo.author.map(role => role.authority); console.log(userInfo); // 역할에 따라 페이지 이동 if (roles.includes("STUDENT")) { vm.goToPage('Dashboard'); } else if (roles.includes("TEACHER")) { vm.goToPage('Board'); } else if (roles.includes("PARENT")) { vm.goToPage('Main_p'); } else if (roles.includes("ADMIN")) { vm.goToPage('Dashboard'); } } else { console.error('Invalid token structure'); } } else { console.error('No token found'); } }, closeModal() { this.showModal = false; }, buttonSearch() { this.searchOpen = true; }, closeBtn() { this.searchOpen = false; }, goToPage(page) { this.$router.push({ name: page }); }, }, components: { SvgIcon }, } </script> <style scoped></style>