vue-cookies、極驗滑動驗證geetest、vue-router的導航守衛
阿新 • • 發佈:2018-12-19
一 . vue-cookies
參考文件簡書:https://www.jianshu.com/p/535b53989b39
參考文件npm:https://www.npmjs.com/package/vue-cookies
1 . 安裝 vue-cookies
1 |
npm i vue
-
cookies
-
S
|
2 . 掛載到Vue例項
import VueCookies from 'vue-cookies' Vue.use(VueCookies);
3 . 使用
1)設定一個cookie
this.$cookies.set(keyName, value) //return this
2)是否存在一個cookie
this.$cookies.isKey(keyName) // return false or true
3)獲取一個cookie
this.$cookies.get(keyName) // return value
4 . 從瀏覽器檢視cookies
二 . 極驗滑動驗證(geetest)
要想用geetest滑動驗證,既要在服務端部署,又要在客戶端部署,本篇簡單介紹客戶端部署的知識。
準備工作:服務端部署完成
1、引入初始化函式,它用於載入對應的驗證JS庫
<script src="gt.js"></script>
2、呼叫初始化函式`initGeetest`進行初始化
ajax({ url: "API1介面(詳見服務端部署)", 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。
3、通過geetest中API方法的appendTo方法,將滑動驗證按鈕渲染到頁面
<div id="captcha-box"></div> ... <script> initGeetest({ // 省略配置引數 }, function (captchaObj) { captchaObj.appendTo('#captcha-box'); // 省略其他方法的呼叫 }); </script>
4、通過ajax方式進行二次驗證
initGeetest({ // 省略配置引數 }, function (captchaObj) { // 省略其他方法的呼叫 // 監聽滑動驗證成功,呼叫 onSuccess 方法 captchaObj.onSuccess(function () { var result = captchaObj.getValidate(); // 返回的result是object型別,包含有三個鍵值對,連帶使用者名稱密碼提交到其他伺服器 // ajax 虛擬碼 ajax(apirefer, { geetest_challenge: result.geetest_challenge, geetest_validate: result.geetest_validate, geetest_seccode: result.geetest_seccode, // 其他服務端需要的資料,比如登入時的使用者名稱和密碼 }, function (data) { // 根據服務端二次驗證的結果進行跳轉等操作 }); }); });