vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一 . 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) {
// 根据服务端二次验证的结果进行跳转等操作
});
});
});
三 . vue-router 中的导航守卫
我们在学习动态路由匹配时了解到,当使用路由参数时,如从 /user/goo 导航到 /user/bar , 原来的组件实例会被复用,因为两个路由都渲染一个组件(导航组件),比起销毁在创建,复用则显得更加高效,不过,这意味着组件的声明周期钩子不会再被调用,我们在复用组件时,相对路由参数的变化作出相应的话,除了用过的 watch 监听 $route 对象外,我们还可以使用导航守卫.
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => {
// ...
})
luffy项目的全局导航示例 :
import router from './router'
// 全局导航守卫
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from); if(VueCookies.isKey('access_token')){
let userinfo = {
username: VueCookies.get('username'),
shop_cart_num: VueCookies.get('shop_cart_num'),
access_token: VueCookies.get('access_token'),
avatar: VueCookies.get('avatar'),
notice_num: VueCookies.get('notice_num')
};
store.dispatch('getUser', userinfo)
}
next() // 必须写,否则会阻塞
});
四 . Axios 拦截器
在请求或响应被 then 或 catch 处理前拦截他们,示例 :
// 添加请求拦截器,参数config是axios实例对象
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么(比如可以为每一次请求设置请求头)
if(VueCookies.isKey('access_token')){
config.headers.common['Authorization'] = auth_token;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
五 . 知识点补充
1 . 对 element-ui 的一个组件添加原生事件
<el-button @click.native.prevent="deleteRow(scope.$index, shopCartList)" type="text" size="small">删除</el-button>
解释:对element-ui的一个组件添加原生js事件要按照上面方式写
- click代表原生click事件;
- native表示调用原生js事件;
- prevent表示阻止默认事件;
vue-cookies、极验滑动验证geetest、vue-router的导航守卫的更多相关文章
- Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- 基于form表单的极验滑动验证小案例
01.目录展示 02.url.py urlpatterns = [ path('admin/', admin.site.urls), path('login/',views.login), path( ...
- thinkphp整合系列之极验滑动验证码geetest
给一个央企做官网,登录模块用的thinkphp验证码类.但是2019-6-10到12号,国家要求央企检验官网漏洞,防止黑客攻击,正直贸易战激烈升级时期,所以各事业单位很重视官网安全性,于是乎集团总部就 ...
- vue_drf之实现极验滑动验证码
一.需求 1,场景 我们在很多登录和注册场景里,为了避免某些恶意攻击程序,我们会添加一些验证码,也就是行为验证,让我们相信现在是一个人在交互,而不是一段爬虫程序.现在市面上用的比较多的,比较流行的是极 ...
- thinkphp整合系列之极验滑动验证码
对于建站的筒子们来说:垃圾广告真是让人深恶痛绝:为了清净:搞个难以识别的验证码吧:又被用户各种吐槽:直到后来出现了极验这个滑动的验证码:这真是一个体验好安全高的方案:官网:http://www.gee ...
- selenium+java破解极验滑动验证码的示例代码
转自: https://www.jianshu.com/p/1466f1ba3275 selenium+java破解极验滑动验证码 卧颜沉默 关注 2017.08.15 20:07* 字数 3085 ...
- Python——破解极验滑动验证码
极验滑动验证码 以上图片是最典型的要属于极验滑动认证了,极验官网:http://www.geetest.com/. 现在极验验证码已经更新到了 3.0 版本,截至 2017 年 7 月全球已有十六万家 ...
- python验证码识别(2)极验滑动验证码识别
目录 一:极验滑动验证码简介 二:极验滑动验证码识别思路 三:极验验证码识别 一:极验滑动验证码简介 近些年来出现了一些新型验证码,不想旧的验证码对人类不友好,但是这种验证码对于代码来说识别难度上 ...
- Python 破解极验滑动验证码
Python 破解极验滑动验证码 测试开发社区 1周前 阅读目录 极验滑动验证码 实现 位移移动需要的基础知识 对比两张图片,找出缺口 获得图片 按照位移移动 详细代码 回到顶部 极验滑动验证码 以 ...
随机推荐
- linux远程登录工具
ssh协议原理
- 负样本采样及bias校准、ctr平滑
参考:https://zhuanlan.zhihu.com/p/31529643 在CTR预估中,负样本采样是一种常见的特征工程方法.一般CTR预估的原始正负样本比可能达到1:1000~1:10000 ...
- docker入门小结(三)
本次笔记主要记录教程中的几个实战案例的实际情况 1,使用supervisor管理进程 忘了截图了,就不写了.教程中写的比较清楚. 但是注意,如果刚刚学习了上一章的网络配置,需要将网络的forward打 ...
- Python标准库:1. 介绍
标准库包括了几种不同类型的库. 首先是那些核心语言的数据类型库,比方数字和列表相关的库.在核心语言手冊里仅仅是描写叙述数字和列表的编写方式,以及它的排列,而未定义它的语义. 换一句话说,核心语言手冊仅 ...
- Andfix热修复框架原理及源代码解析-上篇
热补丁介绍及Andfix的使用 Andfix热修复框架原理及源代码解析-上篇 Andfix热修复框架原理及源代码解析-下篇 1.不知道怎样使用的同学,建议看看我上一篇写的介绍热补丁和Andfix的使用 ...
- Android 百度地图开发(二)
这一篇文章主要解说的是百度地图的定位功能,然后还有MyLocationOverlay和PopupOverlay两个地图覆盖物的使用.Overlay是"图层"或"覆盖物&q ...
- 环信ONE SDK架构介绍
环信ONE SDK架构介绍 摘要 环信即时通讯SDK自2014年6月正式公布2.0版本号至今已走过一个年头.从主要的单聊功能,到群聊功能,再到聊天室的实现.SDK无论是功能.稳定性,还是易集成性都在一 ...
- Node.js学习笔记(6)——使用Express创建一个工程
前提是搭建好了环境,node,npm,express:(推荐全局安装) 开始用express创建一个基础工程: express –t ejs microblog 进入文件夹之后 npm-install ...
- zabbix agent shell一键安装脚本
#!/bin/bash basepath=$(cd ``; pwd) SHELL_DIR="${basepath}/shell" PACKAGE_DIR="${basep ...
- SpringBoot学习之常用注解
@SpringBootAppliaction:通常注解写在SpringBoot启动类中,主要包括三个作用: 1.@Configuration表示将该类作用springboot配置文件类. 2.@Ena ...