VUE front-end implements three solutions for invisible refresh of token (refresh_token)

Preface

Usually, for some systems that need to record user behavior, they will require the logged-in token to be passed when making network requests. However, for the sake of interface data security, the server's token is generally not set too long, and it usually looks 1-7 days as needed. After the token expires, you need to log in again. However, frequent login will cause bad experiences. Therefore, if you need to have a good experience, you need to refresh the token regularly and replace the previous token.

To achieve invisible refresh of tokens, there are three main solutions:

Plan 1:

The backend returns the expiration time, and the frontend determines the expiration time of the token every time it requests. If the expiration time is almost over, it calls to refresh the token interface.

shortcoming: The backend needs to provide an additional field of token expiration time; local time judgment is used. If the local time is tampered with, especially if the local time is slower than the server time, the interception will fail.

Plan 2:

Write a timer and refresh the token interface regularly.

shortcoming: Wasting resources and consuming performance, it is not recommended to use it.

Plan 3:

Intercept in the request response interceptor. After determining that the token returns to expire, call refresh the token interface.

Combining the above three methods, the best one is the third one, because it does not require additional resources. Next, we look at the interception using axios for network requests and then responding to them.

import axios from 'axios'

(
  response => {
    if ( === 401) {
        return refreshToken({ refreshToken: ('refreshToken'), token: getToken() }).then(res => {
          const { token } = 
          setToken(token)
           = `${token}`
        }).catch(err => {
          removeToken()
          ('/login')
          return (err)
        })
    }
    return response && 
  },
  (error) => {
    ()
    return (error)
  }
)

Question 1: How to prevent multiple refreshes tokens

In order to prevent multiple refreshes tokens, you can use a variable isRefreshing to control whether the state of the token is refreshed.

import axios from 'axios'

(
  response => {
    if ( === 401) {
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken({ refreshToken: ('refreshToken'), token: getToken() }).then(res => {
          const { token } = 
          setToken(token)
           = `${token}`
        }).catch(err => {
          removeToken()
          ('/login')
          return (err)
        }).finally(() => {
          isRefreshing = false
        })
      }
    }
    return response && 
  },
  (error) => {
    ()
    return (error)
  }
)

Question 2: How to refresh the token when two or more requests are initiated at the same time

When the second expired request comes in and the token is refreshing, we first save the request to an array queue and find a way to make the request wait until the token is refreshed and then try to clear the request queue one by one. So how do you make this request wait? To solve this problem, we have to use Promise. After saving the request into the queue, a Promise is returned at the same time, so that the Promise is in the Pending state (that is, it does not call resolve). At this time, the request will be waiting. As long as we do not execute resolve, the request will be waiting. When the refresh requested interface returns, we call resolve and try one by one.

import axios from 'axios'

// Is the mark being refreshed?let isRefreshing = false
//Retry the queuelet requests = []
(
  response => {
  //Agreed code 409 token expires    if ( === 401) {
      if (!isRefreshing) {
        isRefreshing = true
        //Calling the interface to refresh the token        return refreshToken({ refreshToken: ('refreshToken'), token: getToken() }).then(res => {
          const { token } = 
          // Replace token          setToken(token)
           = `${token}`
           // Re-execute the array method after refreshing          ((cb) => cb(token))
          requests = [] // Request again to clear          return service()
        }).catch(err => {
        //Skip to login page          removeToken()
          ('/login')
          return (err)
        }).finally(() => {
          isRefreshing = false
        })
      } else {
        // Returns the Promise where resolve is not executed        return new Promise(resolve => {
          // Save resolve in function form, wait for refresh before executing          (token => {
             = `${token}`
            resolve(service())
          })
        })
      }
    }
    return response && 
  },
  (error) => {
    ()
    return (error)
  }
)

Summarize

This is the article about the implementation of the VUE front-end token's senseless refresh (refresh_token) response. For more relevant VUE front-end token's senseless refresh content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!