vue项目中极验验证的使用代码示例(3)

// 导入极验验证 import {geetestMixin} from "./geetest-mixin"; import {mapGetters} from "vuex"; import {commonApi} from "../api/commonApi"; export default { name: 'Regist', mixins: [geetestMixin], data(){ return { form: { ...表单数据 }, committing: false, errMsg: ' ',. } }, methods: { // 提交注册数据 submitRegistData(){ ...你的业务逻辑 /*if(this.geetest.showGeetest){ // 如果没有geetest_challenge,则说明用户没有进行行为验证 if(!this.geetest.geetestSuccessData.geetest_challenge){ this.errMsg = this.$t('formError.geetest'); // 点击按钮进行验证 return; } }*/ this.errMsg = ''; if(!this.geetest.geetestObj){ /* 如果this.geetest.geetestFatched==true,则说明已经加载过极验了 如果this.geetest.showGeetest==false,则说明后台关闭极验了 */ if(this.geetest.geetestFatched && !this.geetest.showGeetest){ //this.committing = true; this.commitData(); }else{ this.initGeetest({ product: 'bind', lang: this.get_lang.code, }); } }else{ if(this.geetest.showGeetest){ this.geetestShow(); }else{ console.log('fasfsafsdfsd') //this.committing = true; this.commitData(); } } }, // 提交数据 commitData(){ if(this.committing){ return; } this.committing = true; let data = { ...this.form }; let geetestData = {}; // 获取极验数据 if(this.geetest.showGeetest){ geetestData = { ...this.geetest.geetestSuccessData, sign: this.geetest.sign } } if(!this.form.inviteCode){ delete data.inviteCode; } commonApi.regist(data, geetestData) .then(res => { this.committing = false; if(res.errcode === 0){ ...你的业务逻辑 }else{ // 重置极验,使极验回到可操作状态 this.geetestReset(); } }) .catch(() => { this.committing = false; // 重置极验,使极验回到可操作状态 this.geetestReset(); }); }, // 极验验证成功后回调 onGeetestSuccess(){ // 用户通过极验行为验证后做的操作 this.commitData(); }, // 极验被禁用后回调 onDisableGeetest(){ this.commitData(); } }, computed: { ...mapGetters(['get_lang']) } };

3、极验初始化时间问题

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a53fe6dedf2ab7e78baa92ebb58ed3aa.html