Vue（7）- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

1、vue-cookies

　　参考文档简书：https://www.jianshu.com/p/535b53989b39

　　参考文档npm：https://www.npmjs.com/package/vue-cookies

一、安装vue-cookies

npm i vue-cookies -S

二、挂载到Vue实例

import VueCookies from 'vue-cookies' Vue.use(VueCookies);

三、使用

　　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

　　四、从浏览器查看cookie　

 

　

 

 

 

 

 

2、极验滑动验证（geetest） 

官网：https://docs.geetest.com/

　　要想用geetest滑动验证，既要在服务端部署，又要在客户端部署，本篇简单介绍客户端部署的知识。

　　准备工做：服务端部署完成

一、引入初始化函数，它用于加载对应的验证JS库

<script src="gt.js"></script>

二、调用初始化函数`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。

三、经过geetest中API方法的appendTo方法，将滑动验证按钮渲染到页面

<div id="captcha-box"></div>
... <script> initGeetest({ // 省略配置参数
    }, function (captchaObj) { captchaObj.appendTo('#captcha-box'); // 省略其余方法的调用
 }); </script>

四、经过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) { // 根据服务端二次验证的结果进行跳转等操做
 }); }); });

3、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() // 必须写，不然会阻塞
});

4、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); });

5、补充知识点

 一、对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表示阻止默认事件；