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

1	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 的實例方法
        })
    }
})

View Code

　　以上初始化過程，須要結合服務端 SDK 使用，由於初始化所傳入的配置參數來自服務端 SDK。

三、經過geetest中API方法的appendTo方法，將滑動驗證按鈕渲染到頁面

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

View Code

四、經過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表示阻止默認事件；