vue + typescript + 極驗登錄驗證的實現(xiàn)方法
此功能基于vue(v2.6.8) + typescript(v3.3.3333), 引入極驗(geetest v3+)(官方api),使用其product: 'bind'模式, 頁面掛載后初始化ininGeetest,點擊登錄按鈕后先做表單驗證,通過后彈出滑塊框,拖動驗證成功,執(zhí)行登錄方法。
本項目為前后端分離,所以后端部署部分,請自行參考文檔操作

后臺接口:



開始:/public/js目錄添加 jquery-1.12.3.min.js文件 和 gt.js(下載)在/public/index.html中引入以上添加的兩個文件login.vue使用注意事項:要注意在gt.js中,initGeetest已被掛載到window對象

頁面可能報錯: 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所需參數(shù)值
*/
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);
}
/**
* 初始化后的回調函數(shù)
*/
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) {
// 驗證通過,發(fā)送登錄請求
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(); // 顯示驗證碼
}
});
}
/**
* 驗證成功,發(fā)送登錄請求
*/
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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
解決Vue3.0刷新頁面警告[Vue Router warn]:No match 
這篇文章主要介紹了解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02

