VUE intercepts requests without perception refresh token
Application scenarios
After logging in to the front-end, the back-end returns the token and token expiration time. When a specific condition is reached (this article takes two hours before the token expires as an example), the front-end needs to actively request the token to refresh the interface to obtain a new token, so that the user can refresh the token without perception.
Ideas
Intercept the request to determine whether the condition to refresh the token is met. If the conditions are met, refresh the token and save the request to a retry queue. When the token is refreshed, execute the function in the retry queue to achieve the effect of refreshing the token.
It should be noted that when multiple requests come in almost the same time, in order to avoid performing multiple token refreshes, a variable (the variable name in this article isRefreshing) needs to be defined for marking.
import axios from "axios";
import store from "@/store";
import md5 from "js-md5";
import {
setToken,
getToken,
setUid,
setExpireTime,
getExpireTime
} from "@/utils/auth";
// Create an axios instanceconst service = ({
// The request in axios has a baseURL option, indicating that the public part of the request URL is baseURL: + .VUE_APP_BASE_API,
// time out timeout: 10000
});
// Is the mark being refreshed?let isRefreshing = false;
// Retry the queue, each item will be a function to be executedlet requests = [];
// Determine whether it is 2 hours away from expirationfunction isRefreshTokenExpired() {
const expire_time = getExpireTime(); // Expiry time const new_time = new Date().getTime(); // Current time const stamp = expire_time - new_time; // The expiration time return stamp <= 2 * 60 * 60 * 1000 ? true : false; // 2 hours}
// request interceptor(
config => {
const tokenObj = getToken();
if ( === "xxxx") { //When the requested interface is refreshed by token return config;
}
if (tokenObj && isRefreshTokenExpired()) {
// Refresh the token now if (!isRefreshing) {
isRefreshing = true;
// Request token to refresh the interface store
.dispatch("RefeshToken")
.then(res => {
const token = ;
const time = .expire_time.replace(/-/g, "/");
const expire_time = new Date(time);
setToken(token, expire_time);
setExpireTime(new Date(.expire_time).getTime(), expire_time);
setUid(, expire_time);
isRefreshing = false;
return token;
})
.then(token => {
(cb => cb(token));
// After execution is completed, clear the queue requests = [];
})
.catch(res => {
("refresh token error: ", res);
});
}
const retryOriginalRequest = new Promise(resolve => {
(token => {
// Because the token in config is old, after refreshing the token, you must pass the new token in ["ContentToken"] = token;
resolve(config);
});
});
return retryOriginalRequest;
}
return config;
},
error => {
(error);
}
);
// Response Interceptor(
res => {
if ( === 200) {
return res
}
},
error => {
('catch', error)
return (error)
}
);
export default service;
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.