前后端分離項(xiàng)目，token過期，重新登錄和刷新token的問題

閱讀了一些文章，前后端分離項(xiàng)目處理token過期一般有兩種處理方式，即過期重新登錄和刷新token續(xù)簽。

一、token過期重新登錄；
操作要點(diǎn)
1、前端登錄獲得token后,每次請求都會攜帶token；
2、前端每次攜帶token發(fā)起請求時，后端都把這個token的有效期更新為最大；
3、如果很久沒使用，導(dǎo)致token過期，前端請求時后端會返回指定的狀態(tài)碼，前端根據(jù)狀態(tài)碼跳轉(zhuǎn)到登錄頁面。

二、后端刷新token續(xù)簽，不重新登錄：
第二種方式的操作步驟就是問題，再具體描述一下：

1、后端判斷token過期，是做預(yù)判嗎？還是說等它過期了才會做刷新，根本不需要預(yù)判？
2、后端刷新了token，怎么告訴前端更新token呢？

可能問題也沒問到點(diǎn)子上，請大佬說一下token續(xù)簽這種方式的具體步驟。（前端用vue-cli，發(fā)送請求用axios，如果有一些示例代碼更好。）

謝謝大佬。

回答

編輯回答

玄鳥

token是在瀏覽器中是以cookie存儲，所以你說續(xù)簽，前端發(fā)http請求，就會默認(rèn)帶上cookie，那么后端你就可以拿到判斷這個token的時效性了，然后在response set-cookie更新就好；但是，如果用戶半天不操作了，如果你的token設(shè)置失效時間為十分鐘，那后端就無法更新token了，就必須重新登錄。

2017年11月20日 21:33

編輯回答

巷尾

使用axios的攔截器，在請求攔截的時候判斷是否有token，在響應(yīng)攔截里判斷后端給的狀態(tài)碼，如果token過期，給出提示，是否跳轉(zhuǎn)登錄。如果需要一直讓token有效那就寫個定時刷新token的方法，其它基本都不能達(dá)到這種效果

2017年3月21日 06:57

編輯回答

安于心

這個我剛好在回答后端問題的時候做過詳細(xì)的解釋和方案說明

移步：https://segmentfault.com/q/10...

因?yàn)橛玫氖俏易约旱目蚣?所以你看token部分的邏輯就好,不需要糾結(jié)具體的寫法主要就是checkTokenExpire 和 isTokenAlmostExpired

var USER = APPSITE({

    // Stuct & data
    userid:       LOCAL.get('userid') ,
    openid:       LOCAL.get('openid') ,
    token:        LOCAL.get('token')  ,
    tokenexpire:  parseInt(LOCAL.get('tokenexpire')) ,

    init:function(){

        this.userid       = LOCAL.get('userid') ;
        this.openid       = LOCAL.get('openid') ;
        this.token        = LOCAL.get('token')  ;
        this.tokenexpire  = parseInt(LOCAL.get('tokenexpire'));

    },

    // check 
    islogin:function(){
        return this.userid;
    },

    checkTokenExpire:function(){

        if (this.isTokenExpired()) {

            this.clearUser();
        
        }else if(this.isTokenAlmostExpired()){
        
            this.updateToken();
        }
    },

    isTokenExpired:function(){

        var now    = parseInt((new Date()).getTime()/1000);    
        var expire = this.tokenexpire ? this.tokenexpire : 0;

        return now>this.tokenexpire;
    },

    isTokenAlmostExpired:function(){

        var now = parseInt((new Date()).getTime()/1000);    
        var almost = (this.tokenexpire-now)<=CONFIGS.tokenRefreshCycle;

        return almost<0;
    },

    updateToken:function(){

        this.clearOptions();
        this.setParams({'userid':this.userid,'token':this.token,});
        this.setAction('updateToken');
        this.setCallback(this.updateTokenCallback);
        this.setExpire(45*24*3600);

        TJAX.request(USER.options);

    },
}

2017年6月21日 16:30