background
Recently, when using the system, the business staff reported that the token had expired and needed to log in again after logging in for a while. This experience is very unfriendly. They want to set the expiration time a little longer and do not want to log in frequently.
think
If the token time is set too long, there will be security problems; if it can be detected that the token expires, then request a new token to replace the expired token, and then request the interface. In this way, the token expires and the user has no perception.
accomplish
To detect the token expires, you can actively and passively handle it. Simply put, proactive judgment means processing before the token expires, and passively, processing after the token expires.
The following is to use three methods to realize the senseless refresh of tokens.
1.Judge by returning to the expired field
The expired fields returned by the token authentication interface are judged, and then the local time is compared. If the token is expired, the token will be re-acquisitioned. This also has its disadvantages. If the local time is inaccurate, there will be a problem of judgment errors.
2. Obtain tokens by refreshing regularly
Write a global timer and refresh the token regularly. This method is obviously not good and is not recommended.
3. Intercept through axios response interceptor
After determining that the token returns to expire, call to refresh the token interface
accomplish:
// Create an axios instanceconst request = ({
// Default prefix for API requests baseURL: baseUrl,
withCredentials: true,
timeout: 30000 // Request timeout})
// This is to prevent multiple refreshes tokens, you can use a variable isRefreshing to control whether the state of the token is being refreshed.let isRefreshing = false // Is the mark being refreshed?This time, in order to resolve the issue of two or more requests being initiated at the same time，How to deal with expiration
let requests = [] // Retry the queue// Exception intercept processorconst errorHandler = error => {
if () {
//Token expired status code if ( === 401) {
if (!isRefreshing) {
// Refreshing, executing the logic inside else isRefreshing = true
return ('RefreshToken',.refresh_token).then(res => {
//Get new tokens, the logic here handles it by itself. Both access_token and refresh_token need to be replaced and saved = 'Bearer ' + res.access_token
// After the token request is successful, the array method is re-execute ((cb) => cb(res.access_token))
requests = [] // Request again to clear return request()
}).catch(() => {
// If the refresh refresh_token has expired, log in again ({
message: 'token expired',
description: 'Please log in again'
})
if (token) {
('Logout').then(() => {
()
})
}
}).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 => {
= 'Bearer ' + token
resolve(request())
})
})
}
}
}
return (error)
}
(response => {
//......
}, errorHandler)This is the article about the sample code for implementing token-free refreshing for Vue project. For more related content on Vue token-free refreshing, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!