[ Update ] http 錯誤控制處理

劉鈞霖

2021-11-30 8925275188dd075d96f5cc24c0a9eefffc88824e

[ Update ] http 錯誤控制處理

 PAMapp/assets/scss/vendors/elementUI/_messageBox.scss

@@ -7,7 +7,8 @@
        flex-direction: column;
        justify-content: space-between;
        width:300px;
        height: 150px;
        min-height: 150px;
        max-height: 300px;
        .el-message-box__content{
            padding: 15px;
            .el-message-box__message p{
@@ -19,6 +20,7 @@
        }
       
        .el-message-box__btns{
          margin-top: 10px;
            text-align: center;
        }
        .el-button.el-button--primary{

 PAMapp/assets/ts/api/share.ts

@@ -1,11 +1,19 @@
import axios from 'axios';
import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
import { MessageBox } from 'element-ui';
import ErrorMessageBox from '../errorService';
import axios from 'axios';
import _ from 'lodash';

const notRequireInterceptorErrorUrl=[
  '/otp/verify',
  '/eService/authenticate',
  '/login/validate/get_img_code',
  '/login/validate/verify_img_code',
];

export const service = axios.create({
    baseURL: process.env.BASE_URL,
    withCredentials: true
})
});

service.interceptors.request.use(
  (config:AxiosRequestConfig)=>{
@@ -21,30 +29,21 @@
  },
  (error:AxiosError)=>{
    loadingFinish();
    if (error.config.url !== '/otp/verify') {
      openErrorMessage();
    }
    showErrorMessageBox(error)
    return Promise.reject(error);
  }
);



function loadingStart(): void {
    window.$nuxt.$loading.start();
}
};

function loadingFinish(): void {
    window.$nuxt.$loading.finish();
}
};

function openErrorMessage():void{
  MessageBox({
    message: '系統發生錯誤',
    showClose:false,
    showConfirmButton:true,
    confirmButtonText:'確認',
    customClass:'pam-message-box',
    closeOnClickModal:false,
  });
function showErrorMessageBox(error:AxiosError):void{
  if(!_.includes(notRequireInterceptorErrorUrl,error.config.url)){
    ErrorMessageBox();
}
};

 PAMapp/assets/ts/errorService.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,12 @@
import { MessageBox } from 'element-ui';

export default function ErrorMessageBox(errorMsg?:string):void{
  MessageBox({
    message: errorMsg ? errorMsg:'系統發生錯誤',
    showClose:false,
    showConfirmButton:true,
    confirmButtonText:'確認',
    customClass:'pam-message-box',
    closeOnClickModal:false,
  });
}

 PAMapp/pages/consultantLogin/index.vue

@@ -57,9 +57,10 @@

<script lang="ts">
  import { Vue, Component , namespace } from 'nuxt-property-decorator';
  import { AxiosError } from 'axios';
  import { getImgOfVerification, logInToConsultant, getVerificationStatus } from '~/assets/ts/api/consultant';
  import { Role } from '~/assets/ts/models/enum/Role';
  import { MessageBox } from 'element-ui';
  import ErrorMessageBox from '~/assets/ts/errorService';

  const roleStorage = namespace('localStorage');
  @Component({
@@ -107,12 +108,17 @@
    }

    public sendInfo():void{
      this.isAlreadyDone ? this.verify() : this.showErrorMessageBox('請確認帳號、密碼以及驗證碼是否填寫完畢');
      this.isAlreadyDone ? this.verify() : ErrorMessageBox('請確認帳號、密碼以及驗證碼是否填寫完畢');
    }

    private verify():void{
      getVerificationStatus(this.verificationCode).then( verifySuccess => {
        verifySuccess.data ? this.loginWithConsultant() : this.showErrorMessageBox('驗證碼輸入錯誤');
        if(verifySuccess.data){
          this.loginWithConsultant()
        }else{
          this.clearValue();
          ErrorMessageBox('驗證碼輸入錯誤');
        }
      });
    }

@@ -122,21 +128,21 @@
        this.storageRole(Role.ADMIN);
        this.storeUserName();
        this.$router.push('/myAppointmentList/appointmentList');
      }, (error) => {
          this.clearValue();
      }).catch((error:AxiosError)=>{
        this.checkHttpErrorStatus(error);
      });
    }

    private showErrorMessageBox(errorMsg:string):void{
    private checkHttpErrorStatus(error:any):void{
      this.clearValue();
      MessageBox({
        message: errorMsg,
        showClose:false,
        showConfirmButton:true,
        confirmButtonText:'確認',
        customClass:'pam-message-box',
        closeOnClickModal:false,
      });
      switch (error.response.status) {
        case 401:
          const errorMsg = error.response.data.detail;
          ErrorMessageBox(errorMsg);
          break;
        default:
          ErrorMessageBox();
          break;
      }
    }

    private storeUserName(): void {
@@ -144,6 +150,7 @@
    };

    private clearValue():void{
      if (!this.isRememberUserName) this.consultantDto.username='';
      this.consultantDto.password = '';
      this.verificationCode = '';
    }

 PAMapp/pages/login/index.vue

@@ -333,6 +333,7 @@
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component, Ref } from 'vue-property-decorator';
import { LoginRequest, LoginVerify, loginVerify, OtpInfo, register, RegisterInfo, sendOtp } from '~/assets/ts/api/consultant';
import ErrorMessageBox from '~/assets/ts/errorService';
import { Role } from '~/assets/ts/models/enum/Role';

const roleStorage = namespace('localStorage');
@@ -497,7 +498,16 @@
      this.phoneSuccessConfirmVisable = true;
      this.storagePhoneOrEmail(this.setRegisterInfo());
    }).catch(error => {
      if (error.response.status === 401) {
      this.checkHttpErrorStatus(error);
    });
  }
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
          const errorMsg = error.response.data.detail;
          ErrorMessageBox(errorMsg);
          break;
        case 403:
        this.registerDialogVisible = true;
        setTimeout(() => {
          const isScrollBarNeedless = this.contract.scrollHeight <= this.contract.clientHeight;
@@ -505,8 +515,11 @@
            this.isReadContract = true;
          }
        }, 1000);
          break;
        default:
          ErrorMessageBox();
          break;
      }
    })
  }

  destroyed() {