File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="">
<div class="card mb-3">
<div class="card-body">
<div class="pb-2">
<h2 class="card-title text-center pb-0 fs-4"><img :src="logo" alt="로고"></h2>
</div>
<div class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }">
<div class="box">
<label for="yourUsername" class="form-label"><img :src="idIcon" alt="아이디 아이콘">아이디</label>
<div class="input-group has-validation">
<input v-model="userInfo.loginId" ref="loginId" type="text" name="username" class="form-control sm" id="yourUsername" placeholder="아이디를 입력하세요." required>
</div>
</div>
<div class="box">
<label for="yourPassword" class="form-label"><img :src="passwordIcon" alt="비밀번호 아이콘">비밀번호</label>
<input v-model="userInfo.password" ref="password" type="password" name="password" class="form-control sm" id="yourPassword" placeholder="비밀번호를 입력하세요." required>
</div>
<div class="box">
<button class="btn md" type="submit" @click="handleLogin"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { loginProc } from "../../../resources/api/login.js";
export default {
data() {
return {
// 임시 로그인 정보
idIcon: "/client/resources/img/id.png",
passwordIcon: "/client/resources/img/password.png",
loginIcon: "/client/resources/img/loginicon.png",
formSubmitted: false,
logo: "/client/resources/img/logo.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
// id: "admin", // 임시 아이디
// password: "1234", // 임시 비밀번호
userInfo:{
loginId: "",
password: "",
}
};
},
methods: {
// 유효성 검사 함수
validation(){
if(this.userInfo.loginId === ""){
alert("아이디를 입력해주세요.");
this.$refs.loginId.focus();
return false;
}
if(this.userInfo.password === ""){
alert("비밀번호를 입력해주세요.");
this.$refs.password.focus();
return false;
}
return true;
},
// 로그인 처리 함수
async handleLogin() {
if(!this.validation()) {
return; // 유효성 검사 실패 시 함수 종료
}
try {
const response = await loginProc(this.userInfo);
if(response.status === 200) {
const newToken = response.headers.authorization;
// 토큰 저장
this.$store.commit('setAuthorization', newToken);
// 사용자 정보 저장
/** jwt토큰 디코딩 **/
const base64String = newToken.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 user = JSON.parse(jsonPayload);
this.$store.commit("setUserInfo", {
loginId: user.loginId,
userId: user.userId,
userNm: user.userNm,
roles: Array.isArray(user.roles) ? user.roles.map(r => r.authority) : [],
});
// 로그인 성공 시
localStorage.setItem('isLoggedIn', 'true');
// 메인 페이지로 이동
this.$router.push('/');
} else {
alert("로그인에 실패했습니다. 아이디와 비밀번호를 확인해주세요.");
}
} catch (err) {
alert(err.response.data.message);
}
},
},
};
</script>