Vue（7）- vue-cookies、極驗滑動驗證geetest、vue-router的導航守衛

一、vue-cookies

　　參考文檔簡書：https://www.jianshu.com/p/535b53989b39

　　參考文檔npm：https://www.npmjs.com/package/vue-cookies

1、安裝vue-cookies

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、從瀏覽器查看cookie　

 

　

 

 

 

 

 

二、極驗滑動驗證（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表示阻止默認事件；