question
After the token expires or expires, the pop-up window prompts the user to log in and log in again.
When initializing in some pages, multiple APIs will appear, and a pop-up box will pop up and log in again will appear.
Solution
1. Use CancelToken in axios to cancel the subsequent API request when determining that the login fails.
2. Jump the route and cancel the API that was not requested successfully on the previous page.
Implementation method
const myAxios = {
install(Vue) {
let http = ({
// baseURL: 'http://localhost:8088/hklms/app',
// baseURL: .BASE_API,
timeout:1000,
// transformRequest: [
// function (data){
// return (data, {
// indices: false
// })
// }
// ]
})
(
config => {
= new ((cancel) => {
//Use vuex to define pushCancel, request to enter and save it ('user/pushCancel', {cancelToken:cancel})
});
if () {
['token'] =
}
return config
},
error => {
(error)
}
)
(
response => {
const res = ;
if( && === 401){
('user/clearCancel');
()
()
("/login")
return (error);
}else {
return response
}
},
error => {
return (error);
}
)
In the store
state: {
axiosCancelArr:[],
}
mutations:{
CLOSE_SIDEBAR: (state) => {
= !
if(){
('sidebarStatus',1)
}else {
('sidebarStatus',0)
}
},
PUSH_CANCEL(state, cancel){
();
},
CLEAR_CANCEL(state){
(e=>{
e && e()
});
= []
}
},
actions: {
pushCancel({commit}, cancel){
commit('PUSH_CANCEL', cancel)
},
clearCancel({commit}){
commit('CLEAR_CANCEL');
}
}
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.