refactor: login 1. 整理 methods 順序 2. 使用 loginService

Mila

2021-12-16 db369f9ec74cd025e162b99f7ec1ac343733bbc8

refactor: login 1. 整理 methods 順序 2. 使用 loginService

 PAMapp/assets/ts/api/consultant.ts

@@ -7,25 +7,6 @@
import { http } from '../services/httpClient';
import { FastQueryParams } from '../models/quickFilter.model';

// é¡§å®¢ç™»å…¥(TODO: OTP認證開發前 æš«æ™‚使用)
export function login(user: any) {
    return http.post('/authenticate', user)
}

// é¡§å®¢ç™»å…¥-發送OTP
export function sendOtp(loginInfo: LoginRequest) {
    return http.post<OtpInfo>('/otp/sendOtp', loginInfo).then(res => res.data)
}

// é¡§å®¢ç™»å…¥-驗證otp並登入
export function loginVerify(loginVerify: LoginVerify) {
    return http.post('/otp/verify', loginVerify)
}

// é¡§å®¢è¨»å†Š
export function register(registerInfo: RegisterInfo) {
    return http.post('/otp/register', registerInfo)
}

// æŽ¨è–¦ä¿éšªé¡§å•
export function recommend() {
@@ -191,41 +172,6 @@
}
export interface RequestOfLoginSuccess{
  id_token: string;
}

export interface LoginRequest {
    /** "SMS"=手機，"EMAIL"=email */
    loginType: string,
    /** è‹¥loginTypeå¡«SMS則該欄帶入手機、EMAIL則帶入郵件信箱 */
    account: string,
}

export interface OtpInfo {
    /** ç”¨æ–¼å¸¶å…¥otp認證時 */
    indexKey: string,
    /** Otp是否有成功發送 */
    success: boolean,
    failCode: string,
    failReason: string,
}

export interface LoginVerify {
    /** å¯å¸¶å…¥æ‰‹æ©Ÿæˆ–email */
    account: string,
    /** ç”±otp的api回的index key */
    indexKey: string,
    /** ç”±æ‰‹æ©Ÿæˆ–信箱收到的認證碼 */
    otpCode: string
}

export interface RegisterInfo {
    phone?: string,
    email?: string,
    indexKey: string,
    otpCode: string,
    name: string,
    /** "SMS"：Otp發送手機，"EMAIL":Otp發email */
    contactType: string
}

export interface UserReviewsConsultantsParams{

 PAMapp/assets/ts/services/login.service.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,25 @@
import { LoginRequest } from "../models/loginRequest.model";
import { LoginSuccessToken } from "../models/loginSuccessToken.model";
import { LoginVerify } from "../models/loginVerify.model";
import { OtpInfo } from "../models/otpInfo.model";
import { RegisterInfo } from "../models/registerInfo";
import { http } from "./httpClient";

class LoginService {
    /** é¡§å®¢ç™»å…¥-發送OTP **/
  sendOtp(loginInfo: LoginRequest):Promise<OtpInfo> {
    return http.post('/otp/sendOtp', loginInfo).then( res => res.data );
  }

  /** é¡§å®¢ç™»å…¥-驗證OTP **/
  loginVerify(loginVerify: LoginVerify):Promise<LoginSuccessToken>{
    return http.post('/otp/verify', loginVerify).then(res => res.data);
  }

  /** é¡§å®¢è¨»å†Š **/
  register(registerInfo: RegisterInfo):Promise<LoginSuccessToken>{
    return http.post('/otp/register', registerInfo).then(res => res.data);
  }
}

export default new LoginService();

 PAMapp/assets/ts/services/pamService.service.ts

@@ -5,11 +5,7 @@
import { ConsultantLoginInfo } from '../models/ConsultantLoginInfo';
import { UserSetting } from '../models/account.model';
import { FastQueryParams } from '../models/quickFilter.model';
import { LoginRequest } from "../models/loginRequest.model";
import { OtpInfo } from "../models/otpInfo.model";
import { Consultant } from '../models/consultant.model';
import { RegisterInfo } from '../models/registerInfo';
import { LoginVerify } from '../models/loginVerify.model';
import { StrictQueryParams } from '../models/strictQueryParams';
import { AppointmentParams } from '../models/appointmentParams';
import { UserReviewsConsultantsParams } from '../models/UserReviewsConsultantsParams';
@@ -22,21 +18,6 @@

class PamService {
  constructor() {}

  /** é¡§å®¢ç™»å…¥-發送OTP **/
  sendOtp(loginInfo: LoginRequest):Promise<AxiosResponse<OtpInfo>> {
    return http.post('/otp/sendOtp', loginInfo).then( res => res.data );
  }

  /** é¡§å®¢ç™»å…¥-驗證OTP **/
  loginVerify(loginVerify: LoginVerify):Promise<AxiosResponse<any>>{
    return http.post('/otp/verify', loginVerify);
  }

  /** é¡§å®¢è¨»å†Š **/
  register(registerInfo: RegisterInfo):Promise<AxiosResponse<any>>{
    return http.post('/otp/register', registerInfo);
  }

  /** æŽ¨è–¦ä¿éšªé¡§å• **/
  recommend():Promise<AxiosResponse<Consultant[]>>{

 PAMapp/pages/login/index.vue

@@ -335,10 +335,14 @@
<script lang="ts">
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 { OtpErrorCode } from '~/assets/ts/models/enum/otpErrorCode';
import { Role } from '~/assets/ts/models/enum/Role';
import { LoginRequest } from '~/assets/ts/models/loginRequest.model';
import { LoginVerify } from '~/assets/ts/models/loginVerify.model';
import { OtpInfo } from '~/assets/ts/models/otpInfo.model';
import { RegisterInfo } from '~/assets/ts/models/registerInfo';
import loginService from '~/assets/ts/services/login.service';

const roleStorage = namespace('localStorage');

@@ -382,6 +386,8 @@
  applyAccount_onAction = false;

  previousPath = '';

  /////////////////////////////////////////////////////
  mounted() {
    const phoneOtpTime = localStorage.getItem('phoneOtpTime');
    const emailOtpTime = localStorage.getItem('emailOtpTime');
@@ -395,6 +401,22 @@
    }
  }

  beforeRouteEnter (to, from, next) {
      next(vm => {
        console.log(from.path, 'beforeRouteEnter');
        vm.previousPath = from.path;
      })
  }

  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);
    clearInterval(this.autoRedirectInterval);
  }


  //////////////////////////////////////////////////////////
  detectContractReadStatus(event: any): void {
    const scrollTop = Math.round(event.target.scrollTop);
    const height = event.target.scrollHeight - event.target.clientHeight;
@@ -445,7 +467,7 @@
      loginType: isMobile ? 'SMS' : 'EMAIL',
      account: isMobile ? this.phoneNumber : this.email,
    }
    sendOtp(loginInfo).then(otpInfo => {
    loginService.sendOtp(loginInfo).then(otpInfo => {
      if (otpInfo.success) {
        this.storageOtpTime(type, otpInfo);
        this.startOtpSetting(type);
@@ -484,8 +506,8 @@
    this.applyAccount_onAction = true;
    const registerInfo = this.setRegisterInfo();

    register(registerInfo).then(res => {
      this.storageIdToken(res.data.id_token);
    loginService.register(registerInfo).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.storagePhoneOrEmail(registerInfo);
      this.autoRedirect();
@@ -501,36 +523,11 @@
    this.redirect();
  }

  private autoRedirect() {
    this.autoRedirectInterval = setInterval(() => {
      this.autoRedirectCounter -= 1;

      if (this.autoRedirectCounter === 0) {
        clearInterval(this.autoRedirectInterval);
        this.redirect();
      }
    }, 1000)
  }

  private redirect() {
    const backToPrevious = ['questionnaire', 'myConsultantList'];
    const find = backToPrevious.findIndex(item => this.previousPath.includes(item));
    console.log(this.previousPath, find, 'redirect');
    find > -1 ? this.$router.go(-1) : this.$router.push('/');
  }

  beforeRouteEnter (to, from, next) {
      next(vm => {
        console.log(from.path, 'beforeRouteEnter');
        vm.previousPath = from.path;
      })
    }

  login() {
    const login: LoginVerify = this.setLoginInfo();
    this.removeOtpTime();
    loginVerify(login).then(res => {
      this.storageIdToken(res.data.id_token);
    loginService.loginVerify(login).then(res => {
      this.storageIdToken(res.id_token);
      this.storageRole(Role.USER);
      this.phoneSuccessConfirmVisable = true;
      this.autoRedirect();
@@ -539,6 +536,9 @@
      this.checkHttpErrorStatus(error);
    });
  }


  //////////////////////////////////////////////////////////////////
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
@@ -560,11 +560,22 @@
      }
  }

  destroyed() {
    this.removeOtpTime();
    clearInterval(this.otpInterval);
    clearInterval(this.emailResendInterval);
  private autoRedirect() {
    this.autoRedirectInterval = setInterval(() => {
      this.autoRedirectCounter -= 1;

      if (this.autoRedirectCounter === 0) {
    clearInterval(this.autoRedirectInterval);
        this.redirect();
      }
    }, 1000)
  }

  private redirect() {
    const backToPrevious = ['questionnaire', 'myConsultantList'];
    const find = backToPrevious.findIndex(item => this.previousPath.includes(item));
    console.log(this.previousPath, find, 'redirect');
    find > -1 ? this.$router.go(-1) : this.$router.push('/');
  }

  private phoneDiffTime(parseOtpTime: any) {

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -140,12 +140,13 @@

<script lang="ts">
import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment } from '~/assets/ts/api/consultant';
import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
import _ from 'lodash';
import { Consultant } from '~/assets/ts/models/consultant.model';
import { ContactType } from '~/assets/ts/models/enum/ContactType';
import { Gender } from '~/assets/ts/models/enum/Gender';
import { RegisterInfo } from '~/assets/ts/models/registerInfo';

  const roleStorage = namespace('localStorage');
  @Component