day 88 Vue學習之八geetes
- 2020 年 1 月 16 日
- 筆記

本節目錄
一 geetest前端web中使用
下載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,大家使用的還是一個(類似於後端程式碼的單例模式)

二 xxx
這裡的內容先不要看昂,導航守衛,路由進階內容:
全局守衛和局部守衛,我簡單說一下全局守衛,全局導航守衛要在全局引入,所以一般都是在man.js這個入口文件引入:

三 xxx
補充一點axios的內容:

還有一個請求前後的操作:

將來的用法:其實這個token就類似於session做的事情。

