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