token刷新

我把token放在cookie中，cookie設(shè)置略小于后臺設(shè)置的過期時間，在每次請求前判斷cookie是否過期，若過期則先獲取新的token再繼續(xù)請求

checkToken().then(
    function(data){
        axios.get(url, {
            params: params
        }).then(function(res) {
            callback(res);
        }).catch(function(error) {
            if(err) {
                callback('error');
            }
        })
    }
)
//判斷是否需要重新獲取token
function checkToken () {
    var p = new Promise(function(resolve, reject){
           let m_access_token = getCookie('m_access_token');
        let refresh_token = getCookie('m_refresh_token');
        if(m_access_token){
            resolve();
        }else{
            axios({
                method: 'post',
                url:paths.loginpath+ '/refreshToken',
                data: Qs.stringify({refresh_token:refresh_token})
            }).then(function(res) {
                addCookie('m_access_token', res.data.access_token,1);
                addCookie('m_refresh_token', res.data.refresh_token,2);
                resolve();
            }).catch(function(error) {
                reject();
            });
        }
    });
    return p;
};

這樣的話有個問題，一個頁面打開的請求會不只一個，若打開頁面的時候token過期的話就會請求多次刷新token，感覺這樣不合理，而且會導(dǎo)致先請求的接口所攜帶的token過期了

回答

編輯回答

厭遇

你如果token 沒有過期就return啊別去重復(fù)獲取新的token 啊

function checkToken 你這個函數(shù) 判斷如果不過期就return 別執(zhí)行從后臺請求獲取token 不就好了

他只會執(zhí)行一次

2018年8月29日 17:05

編輯回答

執(zhí)念

剛寫的筆記，希望對你有用 https://segmentfault.com/n/13...

2018年6月26日 05:45

編輯回答

貓小柒

首先，如果每個請求都是獨(dú)立的，其實是沒有太好的方法去做到只刷新一次token

那么換個思路，axios是有過濾器這個概念的，首先我們在過濾器中獲取到token，并且判斷token是否過期，過期的話就去后端獲取新的token。設(shè)置一個公共變量設(shè)置是否正在獲取cookie，其他請求發(fā)現(xiàn)有其他請求正在獲取token，則去定時獲取token，直到獲取到token才進(jìn)行真正的請求。

其實思路大體和 @追逆風(fēng) 差不多

還有一種解決方法，就是單獨(dú)設(shè)置一個授權(quán)頁面，當(dāng)發(fā)現(xiàn)token過期需要刷新cookie，則直接跳轉(zhuǎn)到授權(quán)頁面，在這個頁面里請求token，然后在回跳到原來的頁面上。其實，你認(rèn)真觀察的話，微信授權(quán)或者其他第三方授權(quán)都是類似的邏輯，推薦這種做法。

var isGetting = false;  //是否正在獲取token

function fetch(url) {
  //檢測token過期
  if (!checkToken()) {
    //如果沒有獲取
    if (!isGetting) {  
      fetch('token');
    } 
    //如果正在獲取
    else {
      return new Promise(function (resolve, reject) {
        //定時繼續(xù)請求原url，如果token過期，還是會執(zhí)行到這兒
        setTimeout(function () {
          return fetch(url);
        }, 500);
      });
    }
  }
  //正常發(fā)送http請求
  return axios.get(url);
}

fetch(url1);
fetch(url2);

2017年10月28日 15:49

編輯回答

囍槑

window.tokenLock = fasle;
function checkLock (cb){
    if(window.tokenLock){
        setTimeout(function(){
            checkLock()
        },500)
    }else{
        window.tokenLock = fasle;
        cb(function(){
            axios.get(url, {
                params: params
            }).then(function(res) {
                callback(res);
            }).catch(function(error) {
                if(err) {
                    callback('error');
                }
            })
        })
    }
}
function checkToken (){
    if(window.tokenLock){
        checkLock()
    }
    window.tokenLock = true;
    
}

加個鎖大概參考一下

2018年4月29日 16:51