前端踩坑Vue/Axios/Oauth2.0(施工中...)

最近在前端開發的過程當中踩了很多坑，先記錄下來，日後整理

路由實例更新

vue.js裏每一次進行路由導航，對應路由的vue.js組件都會生成一個新的vue實例(簡稱vm)，不注意這一點話會掉坑。

好比在/home路由裏，在mounted()中，我在window下監聽了一個鍵盤事件，爲了不事件重複綁定屢次，我設立一個全局變量來標記建立的狀態，只有第一次進入時才建立監聽事件。

if(!window.keyupFlag){
        let myFunc = ()=>{console.log(this.$refs.input1)}; //這裏用箭頭函數能直接在函數內拿到指向當前的vm的this
        window.addEventListener('keyup',myFunc);
        window.keyupFlag = 1;
    }

可是這樣會致使一個問題，在我跳轉到別的路由，好比/about後在跳轉回/home，我在myFunc函數中this.$refs.input1就會返回undefined。
緣由就是此時/home路由中的vm再也不是第一次建立監聽時this指向的vm了。

那麼轉換思路，改爲每次進入/home都建立監聽事件，且在建立前先清除以前創立的事件。
以及要注意的是，清除事件的target.removeEventListener(type, listener[, options]);，其中傳入的參數要和建立時的一致，且type和listener這兩個參數都是必須的，具體的能夠參閱MDN文檔
這裏我選擇用vuex來保存監聽的回調函數

let myFunc = ()=>{console.log(this.$refs.input1)}; 
    
    let oldMyFunc = this.$store.state.myFunc; //第一次進入/home時這裏尚未被myFunc賦值,第二次進入路由時就有正確的值了
    window.removeEventListener('keyup',oldMyFunc);
    
    window.addEventListener('keyup',myFunc);
    this.$store.commit('setMyFunc',myFunc);

使用Axios發起POST請求時，產生OPTIONS請求問題

緣由是跨域發起複雜請求時，按照新的標準瀏覽器會先發起一個預檢請求OPTIONS請求來測試請求是否能被服務器接受，若是服務端對此沒有相應的處理，就會出現請求失敗的問題。
具體的方案待施工，先丟幾個參考

http://www.ruanyifeng.com/blo...
https://juejin.im/post/5c68b2...
https://segmentfault.com/a/11...

Oauth2.0受權請求

相關的教程不少，可是有兩點鮮有說起

1. 受權服務端要設置請求中的回調域名或ip地址

2. 當使用code來請求access_token時，發起的請求頭Header中要設置"Authorization": ...,
   具體的Authorization值可能不一樣的服務端會有區別，個人項目中用的是

   //BASE64編碼字符串"clientId:clientSecret"
   'Basic ' + window.btoa(clientId + ':' + clientSecret);