hubez-admin/frontend/src/modules/login/views/LoginMain.vue

<template>
  <div>

      <div class="login-box adm-login">
        <div class="wbox">
          <div class="logo"></div>
          <h3 class="title">관리자 로그인</h3>
            <div class="login-form">
              <li><input type="text" placeholder="아이디" v-model="userId"></li>
              <li><input type="password" placeholder="비밀번호" v-model="userPwd" @keyup.enter="ajaxlogin"></li>
              <li>
                <span class="lcont"><input type="checkbox" id="id-remember" ref="chkSaveId" checked><label for="id-remember">아이디 저장</label></span>
                <span class="rcont"><button class="btn-pwreset" @click="clickMenu('/view/login/resetPassword')">비밀번호 초기화</button></span>
              </li>
              <li><button class="btn-pcolor" @click="ajaxlogin">로그인</button></li>
            </div>
          <div class="login-notice">
            <div>
              <li>비밀번호 분실 시 비밀번호 초기화를 이용해주세요.</li>
              <li>비밀번호는 90일이내 변경하여 안전히 관리해주세요.</li>
            </div>
          </div>
        </div>

      </div>      
      <common-modal ref="commonModal"></common-modal>

  </div>
</template>

<script>
import api from '../service/api';
import tokenSvc from '@/common/token-service';
import commonModal from "../components/commonModal";

export default {
  data: function() {
    return {
      row:{},
      errors: [],
      corpId: '',
      userId: '',
      userPwd: ''
    };
  },
  created() {
    // 로그인 페이지 진입시
    if(tokenSvc.getToken()){
      this.$store.commit("login/isLogin", true);
      this.$store.commit("login/isAuthChk", true);
      this.$router.push({ path: '/' });
    }else{
      this.$store.commit("login/isLogin", false);
      this.$store.commit("login/isAuthChk", false);
      this.$store.commit("login/isErrorPage", false);
    }
  },
  mounted() {
    this.$refs.chkSaveId.checked = true;

    if (localStorage.hubwebUserId) {
      this.userId = localStorage.hubwebUserId;
    }
  },
  destroyed() {
    let cont = document.querySelector(".wrap");
    cont.classList.remove("login-wrap");
  },
  components: {    
    commonModal,
  },
  methods: {
    chgChkUserId() {
      if (this.$refs.chkSaveId.checked == true) {
        localStorage.hubwebUserId = this.userId;
      } else {
        delete localStorage.hubwebUserId;
      }
    },
    toRegister(){
      this.$router.push({ name: 'register'});
    },
    async ajaxlogin() {
        
      var vm = this;
      vm.errmsg = null;
      this.row = {}
      
      if (!this.userId){
        this.row.title = '로그인 실패';
        this.row.msg1 = '아이디,비밀번호를 확인해주세요.';
        this.$refs.commonModal.alertModalOpen(this.row);
        return false;
      }
      if (!this.userPwd){
        this.row.title = '비밀번호 오류';
        this.row.msg1 = '비밀번호를 확인해주세요.';
        this.$refs.commonModal.alertModalOpen(this.row);
        return false;
      }

      let oprtrId = this.userId;
      let oprtrPw = this.userPwd;

      // FormData 객체를 파라미터로 넘기면 Content-Type: multipart/form-data; 요청을 한다.
      // 일반 Object를 파라미터로 넘기면 Content-Type: application/json;charset=UTF-8 요청을 한다.
      var params = {
        "oprtrId": this.userId,
        "oprtrPw": this.userPwd,
      }
        //로그인버튼을 누를시 상황
      try {
        const response = await api.login(params)
        const rsp = response.data;        

        if(rsp.retCode == '0000'){
          
          vm.chgChkUserId();
          vm.$store.commit("login/isLogin", true);
          vm.$store.commit("login/savePwd", oprtrPw);
          vm.$router.push({ name: 'loginAuth',params: {userId : oprtrId}});
        } else if(rsp.retCode == '1001'){ // 비밀번호 변경            
          vm.chgChkUserId();
          this.$store.commit("login/isLogin", true);
          this.$router.push({ name: 'updatePassword',params: {userId : this.userId}});
        }else if(rsp.retCode == '4003') { // ID 조회 없음.
          this.row.title = '로그인 실패';
          this.row.msg1 = '아이디, 비밀번호를 확인해 주세요.';
          this.$refs.commonModal.alertModalOpen(this.row);
        } else if(rsp.retCode == '4004') { // ID/PWD 불일치
          //this.row.title = '비밀번호 오류';
          //this.row.msg1 = '비밀번호를 확인해주세요.';          
          this.row.title = '로그인 실패';
          this.row.msg1 = '아이디, 비밀번호를 확인해 주세요.';
          this.$refs.commonModal.alertModalOpen(this.row);
        } else if(rsp.retCode == '4005') { // ID/PWD 불일치 횟수초과로 계정 잠김 4005
          this.row.title = '로그인 실패';
          this.row.msg1 = '로그인 5회 실패하였습니다.';
          this.row.msg2 = '비밀번호 초기화 후 비밀번호를 변경해 주세요.';
          this.row.callFnc = 'resetPassword'
          this.$refs.commonModal.alertModalOpen(this.row);
        } else if(rsp.retCode == '4006') {
          // msg = '비밀번호를 변경하신지 90일이 지났습니다.\n비밀번호 변경 화면으로 이동합니다.';
          this.row.title = '로그인 실패';
          this.row.msg1 = '비밀번호를 변경하지 않은지 90일이';
          this.row.msg2 = '지났습니다. 비밀번호를 변경하여';
          this.row.msg3 = '이용 부탁드립니다.';
          this.row.callFnc = 'updatePassword'
          this.$refs.commonModal.alertModalOpen(this.row);
        } else if(rsp.retCode == '4007') {
          this.row.title = '로그인 실패';
          this.row.msg1 = '아이디 상태를 확인해 주세요.';
          this.row.msg2 = '(사용중인 상태만 로그인 가능합니다.)';
          this.$refs.commonModal.alertModalOpen(this.row);
       } else {
          vm.$store.commit("login/isLogin", false);
          return;
        }
      } catch(err) {
        this.row.title = '로그인';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }

    },


      clickMenu(link){
       
       this.$router.push({
            path: link
        }); 
    },
  
    alertCalbackFnc(callFnc){
      if(callFnc === 'resetPassword'){
        this.$router.push({ name: 'resetPassword',params: {}});
      }else if(callFnc === 'updatePassword'){
        this.$store.commit("login/isLogin", true);
        this.$store.commit("login/isAuthChk", false);
        this.$router.push({ name: 'updatePassword',params: {userId : this.userId}});
      }
    },
    
    } //method 끝
  };

</script>