vue + typescript + 极验登录验证的实现方法

<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="/UploadFiles/2021-04-02/logo_w328.png')">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。