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)

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

　　要想用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表示阻止默认事件；