一 . 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) { // 根据服务端二次验证的结果进行跳转等操作 }); }); });