Problems with front and back end separation of projects, expiration of token, re-login and refresh of token

I have read some articles. There are generally two ways to deal with token expiration by separating items in front and back end, namely, re-login after expiration and refreshing token renewal.

1. Log in again after token expires;
Operation points
1. After the frontend login obtains the token, the frontend will carry token;
2. Each time the frontend carries the token to initiate the request, the backend updates the validity period of the token to the maximum.
3. If the token expires because it is not used for a long time, the backend will return the specified status code when the frontend requests, and the frontend will jump to the login page according to the status code.

II. Refresh the token for renewal at the backend without logging in again:
the operation procedure of the second method is the problem. Describe it in detail:

1. Does the backend judge that the token expires as a prediction? Or will it be refreshed until it expires, and there is no need for pre-judgment at all?
2. When the backend refreshes the token, how do you tell the frontend to update the token?

maybe the question is not to the point. Please tell me the specific steps of token renewal. (the front end uses vue-cli, to send requests using axios,. It would be better if there is some sample code. )

Thank you, boss.

Javascript php
May.30,2021

I just gave a detailed explanation and solution description when answering the back-end question

move: https://codeshelper.com/q/10.

because I am using my own framework, you can just look at the logic of the token section. There is no need to struggle with the specific writing methods, which are mainly checkTokenExpire and 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 is stored in cookie in the browser, so if you renew the license and send a http request at the frontend, you will bring cookie, by default, so you can get the backend to judge the timeliness of the token, and then update it in response set-cookie. However, if the user stops working for a long time, if your token setting expires for 10 minutes, the backend cannot update token and must log in again.

use the interceptor of axios to determine whether there is a token, in the response intercept to determine the status code given by the backend. If the token expires, give a prompt to whether to jump to login. If you need to keep token working, then write a method to refresh token regularly. Nothing else can achieve this effect.

Previous: Nginx secondary domain name confusion

Next: What is the relationship among springboot netflix Pivotal?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-49c4c51-1d334.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-49c4c51-1d334.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?