本節目錄
下載gt文件，官網地址，下面我們就來完成一下基於geetest的滑動驗證怎么做：
首先在項目之使用，將我們下載的文件放到我們的項目目錄下，我放到了static文件夾下的global文件夾下，然后在項目入口文件main.js中引入，看目錄結構：
然后我們直接就能在各個組件中使用了，首先我們找個案例分析一下：看圖
那么后端返回的這三個數據是什么呢，我們看看看geetest官網怎么說的：
我們引入了gt.js之后，就可以使用一個函數叫做`initGeetest` 初始化函數，這個函數怎么用呢，結合ajax或者axios來用，看代碼：
ajax({ url: "API1接口（詳見服務端部署）",這個url就是我們上面那個例子中的請求路徑 type: "get", dataType: "json", success: function (data) { //請檢測data的數據結構， 保證data.gt, data.challenge, data.success有值，你就會發現，這三個數據正好是我們上面這個例子中后端返回給前端的三個數據 initGeetest({ // 以下配置參數來自服務端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: true //這個參數先不用管它，放在這里就行了 }, function (captchaObj) { // 這里可以調用驗證實例 captchaObj 的實例方法 }) } })
官網還說了一句話：以上初始化過程，需要結合服務端 SDK 使用，因為初始化所傳入的配置參數來自服務端 SDK，也就是說要配合后端進行工作。
我們來試一下，看看項目中怎么玩，上面我們在項目中已經引入gt.js文件了，那么我們直接來使用一下：
直接看代碼吧，我的代碼寫的復雜了一些，其實直接在你想做滑動驗證的組件中發送axios請求就行，我把請求和url都放到了一個其他的文件里面了，名字叫做api.js，在static文件夾下的global文件夾下
好，入口文件main.js的代碼如下：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); import VueCookie from 'vue-cookies' Vue.use(VueCookie); Vue.config.productionTip = false; //引入全局的geetest import '../static/global/gt' //將api引入 import * as api from './restful/api' Vue.prototype.$http = api; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
api.js文件內容如下：
import Axios from 'axios' Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1' ; const captchaCheckUlr = '/captcha_check/'; export function testGeet() { return Axios.get(`${captchaCheckUlr}`).then(res=>res.data) //根據后端返回的數據結構來處理的，那現在得到的是一個含有包含那三個數據的自定義對象{challenge:"b58455a1f1493a9037e86f0a4f478eba"gt:"37ca5631edd1e882721808d35163b3ad"success:1} }
路由信息文件index.js內容如下：
import Vue from 'vue' import Router from 'vue-router' // import Home from '@/components/Home/Home' import Login from '@/components/Login/Login' Vue.use(Router); export default new Router({ mode:'history', routes: [ { path: '/', redirect:{name:'Login'} }, { path: '/', name: 'Login', component: Login } ] })
組件Login.vue內容如下：
<template>
<div id="login">
<div id="geetest"></div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {}
},
methods: {
getGeetest() {
this.$http.testGeet().then(res => {
console.log(res);
//使用gt的initGeetest函數來初始化咱們的滑動驗證
initGeetest({
// 以下配置參數來自服務端 SDK，這是第一次驗證，也就是獲取到了后端的這個三個數據
gt: res.data.gt,
challenge: res.data.challenge,
offline: !res.data.success,
new_captcha: true
}, function (captchaObj) {
// 這里可以調用驗證實例 captchaObj 的實例方法
console.log(captchaObj);
//通過調用captchaObj對象的appendTo方法，給某個標簽添加上滑動驗證對象，就行了，看寫法
captchaObj.appendTo('#geetest') //參數是一個標簽選擇器，那么這個標簽就加上了滑動驗證的頁面效果
})
}).catch(err => {
})
}
},
created() {
this.getGeetest();
}
}
</script>
<style scoped>
#login {
width: 200px;
height: 40px;
}
</style>
App.vue組件的內容如下：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
好，拿到上面的代碼一運行，就有了。
頁面效果如下：
點擊這個按鈕之后的效果如下：
滑動之后的效果如下：
好，現在滑動驗證的效果就有了。
但是做一個滑動驗證還需要第二次驗證，上面拿到后端的那三個數據算是第一次驗證了，也就是第一次和后端交互了，那么第二次驗證是什么呢，官網上也有說法，直接看我的圖吧：
官方代碼是這樣寫的：通過 ajax 方式進行二次驗證，就是滑動完成，需要將滑動完數據發送給后端進行驗證
initGeetest({ // 省略配置參數 }, function (captchaObj) { // 省略其他方法的調用 // 這里調用了 onSuccess 方法，該方法介紹見下文 captchaObj.onSuccess(function () { //這是滑動驗證成功之后立馬發送ajax請求進行登陸，就可以寫在這個方法里面，但是我們上面的那個業務場景並不是直接就登陸，還需要點擊登陸按鈕，所以我們登陸請求不是寫在這里的 var result = captchaObj.getValidate(); // ajax 偽代碼 ajax(apirefer, { geetest_challenge: result.geetest_challenge, geetest_validate: result.geetest_validate, geetest_seccode: result.geetest_seccode, // 其他服務端需要的數據，比如登錄時的用戶名和密碼 }, function (data) { // 根據服務端二次驗證的結果進行跳轉等操作 }); }); });
然后我針對上面的場景寫了一個簡單的登陸頁面：
然后我們寫一下login.vue組件的代碼，其他文件的代碼和之前一樣：
<template>
<div id="login">
<div>
用戶名：<input v-model="username" type="text" name="username">
</div>
<div>
密碼：<input v-model="password" type="password" name="password">
</div>
<div id="geetest"></div>
<div>
<button @click="loginHandler">登陸</button>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
username: '', //保存用戶名和密碼
password: '',
geetestObj: {} //二次驗證的時候需要的三個geetest數據
}
},
methods: {
getGeetest() {
this.$http.testGeet().then(res => {
console.log(res);
//使用gt的initGeetest函數來初始化咱們的滑動驗證
initGeetest({
// 以下配置參數來自服務端 SDK
gt: res.data.gt,
challenge: res.data.challenge,
offline: !res.data.success,
new_captcha: true
}, (captchaObj) => {
// 這里可以調用驗證實例 captchaObj 的實例方法
console.log(captchaObj);
//通過調用captchaObj對象的appendTo方法，給某個標簽添加上滑動驗證對象，就行了，看寫法
captchaObj.appendTo('#geetest'); //參數是一個標簽選擇器，那么這個標簽就加上了滑動驗證的頁面效果
//進行二次驗證
// captchaObj.onSuccess(function () { //別忘了改成箭頭函數，不然this不是你當前的組件對象
captchaObj.onSuccess(() => {
//通過這個captchaObj.getValidate()方法，會得到一個自定義對象，這個對象里面有三個數據，將來點擊提交按鈕的時候，不僅僅要提交用戶名和密碼，還要將這三個數據提交給后端進行驗證
let result = captchaObj.getValidate();
console.log(result);//{geetest_challenge: "a56e62f9d5d985b1d5f94a7477359bc940", geetest_validate: "7157b987d41f2acdae4e60fbd832376f", geetest_seccode: "7157b987d41f2acdae4e60fbd832376f|jordan"}
this.geetestObj = result; //保存這個數據
// // ajax 偽代碼,這些代碼是官網提供的，這是我們做滑動驗證成功之后，直接發送登陸請求的寫法，寫在這個captchaObj.onSuccess的方法中，但是我們的場景不是這樣的，
// ajax(apirefer, {
// geetest_challenge: result.geetest_challenge,
// geetest_validate: result.geetest_validate,
// geetest_seccode: result.geetest_seccode,
//
// // 其他服務端需要的數據，比如登錄時的用戶名和密碼
// }, function (data) {
// // 根據服務端二次驗證的結果進行跳轉等操作
});
})
}).catch(err => {
})
},
//點擊登陸按鈕，將數據發送給對應的登陸url
loginHandler() {
console.log(this.username, this.password, this.geetestObj);//輸入的用戶名密碼還有geetest三個數據，就都有了，
//組合數據，當作登陸請求的參數
let params = {
geetest_challenge: this.geetestObj.geetest_challenge,
geetest_validate: this.geetestObj.geetest_validate,
geetest_seccode: this.geetestObj.geetest_seccode,
username: this.username,
password: this.password,
};
//其實我們在前端還可以對我們發送的這五個數據進行不為空的驗證，我就不寫啦
// 偽代碼：就可以了
// axios.post('登陸url',params).then(res=>{}).catch(error=>{});
}
},
created() {
this.getGeetest();
}
}
</script>
<style scoped>
#login {
width: 200px;
height: 200px;
}
</style>
然后就能夠登陸了，發送了登陸認證請求之后，后端會驗證我們的發送的五個數據(還有個記住密碼的選填數據，這個數據可以自己加到咱們的數據里面，暫時咱們沒用昂)，驗證成功之后，后端會返回給前端一個token，作為你已經登陸成功的標識，以后再點擊網站的其他頁面的時候，就通過這個token值就能判斷當前用戶是不是登陸了，怎么玩呢，通過vue-cookie保存到cookie中就行了。
還有就是我們要將登陸成功后返回回來的個人信息要保存到vuex中，然后標題欄的那個個人信息那部分要用，當然不用vuex也行，組件傳值就可以，我們也是為了用起來更方便：
然后在main.js的vue實例中掛載一下：
然后組件中登陸成功后，那么this.$store.dispatch('get_user',data) 參數一是actions中的方法，data是登陸成功后返回的數據。
那么所有的組件中，都可以通過computed計算屬性來監聽這個數據(里面有token)，來判斷用戶是不是登陸了，並且標題欄也有用戶的信息。
然后用戶點擊退出的時候，別忘了刪cookie，還要刪用戶的信息。
還有個問題就是，你可能發現我們不同的js文件中都導入了vue
import Vue from 'vue'
項目中用的都是一個vue實例，也就是說，即便是你在不同的js文件里面引入了vue，大家使用的還是一個(類似於后端代碼的單例模式)
