Analysis of three solutions for using vue to implement token senseless refresh in the front-end

text

Generally, 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 security of interface data, the server's token is generally not set too long. It is generally 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:

Method 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.

Method 2

Write a timer and refresh the token interface regularly.

shortcoming：

It wastes resources and consumes performance, and is not recommended.

Method 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 ( === 409) {
        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 ( === 409) {
      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 ( === 409) {
      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)
  }
)

The above is the detailed explanation of the three solutions for using vue to implement token senseless refresh on the front-end. For more information about vue front-end token senseless refresh, please pay attention to my other related articles!