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做的事情。

四 xxx

五 xxx

六 xxx

七 xxx

八 xxx