vue + typescript + 極驗 登陸驗證

此功能基於vue（v2.6.8） + typescript（v3.3.3333）, 引入極驗（geetest v3+）（官方api），使用其product: 'bind'模式， 頁面掛載後初始化ininGeetest，點擊登陸按鈕後先作表單驗證，經過後彈出滑塊框，拖動驗證成功，執行登陸方法。

本項目爲先後端分離，因此後端部署部分，請自行參考文檔操做

---

後臺接口：

開始：

1. /public/js目錄添加 jquery-1.12.3.min.js文件 和 gt.js（下載）
2. 在/public/index.html中引入以上添加的兩個文件
3. login.vue使用

---

注意事項：

1. 要注意在gt.js中，initGeetest已被掛載到window對象
   
2. 頁面可能報錯： Uncaught SyntaxError: Unexpected token <

   

   
   將報錯對象添加到與public同級的static目錄下（沒有則新建），修改引入路徑便可。

---

源碼：

<script lang="ts">
import { isValidUsername } from '@/utils/validate';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ElForm } from 'element-ui/types/form';
import { Loading } from 'element-ui';

import { Action } from 'vuex-class';
import AuthServices from '@/services/user/auth.ts';
import ThirdpartyServices from '@/services/thirdparty/index.ts';

const validateUsername = (rule: any, value: string, callback: any) => {
  if (! value) {
    callback(new Error('用戶名不能爲空'));
  //  } else if (!isValidUsername(value)) {
  //   callback(new Error('請輸入正確的用戶名'));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: string, callback: any) => {
   if (! value) {
    callback(new Error('密碼不能爲空'));
  //  } else if (value.length < 5) {
  //   callback(new Error('密碼不能小於5位'));
  } else {
    callback();
  }
};

@Component({
  name: 'login',
})
export default class Login extends Vue {
  @Action('auth/login') private login_action!: CCS.LoginAction;

  private loginForm = { username: '', password: '' };
  private loginRules = {
    username: [{trigger: 'blur', validator: validateUsername }],
    password: [{trigger: 'blur', validator: validatePass }],
  };
  private loading = false;
  private redirect: string | undefined = undefined;
  private captchaEntity: any;
  // private loadingInstance: any;

  @Watch('$route', { immediate: true }) private OnRouteChange(route: Route) {
    this.redirect = route.query && route.query.redirect as string;
  }

  // private created() {
  //   this.loadingInstance = Loading.service({
  //     customClass: 'login_loading',
  //     text: '正在初始化，請稍後',
  //     fullscreen: true,
  //     lock: true,
  //   });
  // }

  /** ==================== 驗證 START =========================  */
  /**
   * 頁面掛載後，後臺獲取初始化initGeetest所需參數值
   */
  private async mounted() {
    ThirdpartyServices.geetest_init().then((result) => {
      // this.loadingInstance.close();
      if (result.status) {
        this.initGeetest(result.data);
      } else {
        this.$message({ type: 'error', message: result.message });
      }
    });
  }
   /**
    * initGeetest 初始化
    */
  private initGeetest(param: CCS.GeettestInitType) {
    if ( ! (window as any) || ! (window as any).initGeetest ) {
      return false;
    }
    (window as any).initGeetest({
      gt: param.gt,
      challenge: param.challenge,
      offline: ! param.success,
      new_captcha: param.newcaptcha,
      timeout: '5000',
      product: 'bind',
      width: '300px',
      https: true,

    }, this.captchaObj_callback);
  }
  /**
   * 初始化後的回調函數
   */
  private async captchaObj_callback(captchaObj: any) {
    this.captchaEntity = captchaObj; // promise對象
    captchaObj
      .onReady(() => { // 驗證碼就位
      })
      .onSuccess(() => {
        const rst = captchaObj.getValidate();
        if (!rst) {
          this.$message({ type: 'warning', message: '請完成驗證'});
        }

        // 調用後臺check this.captchaObj
        this.verify_check(rst);
      })
      .onError((err: Error) => {
        console.log(err);
      });
  }
  /**
   * 後臺驗證初始化結果
   */
  private async verify_check(validateResult: any) {
    ThirdpartyServices.geetest_checked(validateResult.geetest_challenge, validateResult.geetest_validate, validateResult.geetest_seccode ).then((result) => {
      if (result.status && result.data.result) {
        // 驗證經過，發送登陸請求
        this.handleLogin(result.data.token);
      } else {
        this.$message({ type: 'error', message: '驗證失敗'});
        return false;
      }
    });
  }
  /** ==================== 驗證 END =========================  */
  /**
   * 點擊登陸按鈕，彈出驗證框
   */
  private login_btn_click() {
    (this.$refs.refform as ElForm).validate((valid) => {
      if (valid) {
        this.captchaEntity.verify(); // 顯示驗證碼
      }
    });
  }
  /**
   * 驗證成功，發送登陸請求
   */
  private async handleLogin(token: string) {
    this.loading = true;
    const { status, message} = await this.login_action({username: this.loginForm.username.trim(), password: this.loginForm.password, token});

    this.loading = false;
    if (status) {
      this.$message({type: 'success', message: '登陸成功'});
      this.$router.push({ path: this.redirect || '/' });
    } else {
      this.$message({type: 'error', message});
    }
  }
}
</script>

<template>
  <div class="login-container">
    <div class="login_form_wraper">
      <div class="logo_show">
        <img :src="require('@/assets/images/logo_w328.png')">
      </div>
      <img class="form_bg" :src="require('@/assets/images/login_form.png')">
      <el-form ref="refform" class="login-form" auto-complete="on" label-position="left"
         :model="loginForm" :rules="loginRules">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="用戶名"/>
          <i class="iconfont icon-zhanghaodenglu icon_prefix"></i>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" name="password" type="password" auto-complete="on" placeholder="密碼"
            @keyup.enter.native="handleLogin" />
          <i class="iconfont icon-mima icon_prefix"></i>
        </el-form-item>

        <el-form-item class="login_btn">
          <el-button v-if="!loading" @click.native.prevent="login_btn_click">登陸</el-button>
          <el-button :loading="loading" v-else @click.native.prevent="handleLogin">登陸中</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<style lang="stylus" scoped>
@import '~@/assets/styles/var.styl';
@import '~@/assets/styles/pages/login.styl';

.login-container
  pass

</style>