前后端分离项目,token过期,重新登录和刷新token的问题

cherrylee
  • 1.2k

阅读了一些文章,前后端分离项目处理token过期一般有两种处理方式,即过期重新登录和刷新token续签。

一、token过期重新登录;
操作要点
1、前端登录获得token后,每次请求都会携带token;
2、前端每次携带token发起请求时,后端都把这个token的有效期更新为最大;
3、如果很久没使用,导致token过期,前端请求时后端会返回指定的状态码,前端根据状态码跳转到登录页面。

二、后端刷新token续签,不重新登录:
第二种方式的操作步骤就是问题,再具体描述一下:

1、后端判断token过期,是做预判吗?还是说等它过期了才会做刷新,根本不需要预判?
2、后端刷新了token,怎么告诉前端更新token呢?

可能问题也没问到点子上,请大佬说一下token续签这种方式的具体步骤。(前端用vue-cli,发送请求用axios,如果有一些示例代码更好。)

谢谢大佬。

回复
阅读 11.2k
3 个回答

这个我刚好在回答后端问题的时候做过详细的解释和方案说明

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

因为用的是我自己的框架,所以你看token部分的逻辑就好,不需要纠结具体的写法 主要就是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);

    },
}

token是在浏览器中是以cookie存储,所以你说续签,前端发http请求,就会默认带上cookie,那么后端你就可以拿到判断这个token的时效性了,然后在response set-cookie更新就好;但是,如果用户半天不操作了,如果你的token设置失效时间为十分钟,那后端就无法更新token了,就必须重新登录。

使用axios的拦截器,在请求拦截的时候判断是否有token,在响应拦截里判断后端给的状态码,如果token过期,给出提示,是否跳转登录。如果需要一直让token有效那就写个定时刷新token的方法,其它基本都不能达到这种效果

你知道吗?

宣传栏