我要评论问题
token过期或者失效后，弹窗提示用户登陆失效，重新登陆。
在一些页面中初始化时调了多个api，会出现多次弹出重新登陆的弹框
解决方案
1、使用axios中的canceltoken，在判断登陆失败时，取消后面的api请求。
2、跳转路由，取消上一个页面未请求成功的api。
实现方法
const myaxios = {
install(vue) {
let http = axios.create({
// baseurl: 'http://localhost:8088/hklms/app',
// baseurl: process.env.base_api,
timeout:1000,
// transformrequest: [
// function (data){
// return qs.stringify(data, {
// indices: false
// })
// }
// ]
})
http.interceptors.request.use(
config => {
config.canceltoken = new axios.canceltoken((cancel) => {
//使用vuex 定义pushcancel，请求进来存入
store.dispatch('user/pushcancel', {canceltoken:cancel})
});
if (store.state.user.token) {
config.headers['token'] = store.state.user.token
}
return config
},
error => {
console.log(error)
}
)
http.interceptors.response.use(
response => {
const res = response.data;
if(res.code && res.code === 401){
store.dispatch('user/clearcancel');
sessionstorage.clear()
message.error(res.msg)
router.push("/login")
return promise.reject(error);
}else {
return response
}
},
error => {
return promise.reject(error);
}
)
store中 user.js
state: {
axioscancelarr:[],
}
mutations:{
close_sidebar: (state) => {
state.opened = !state.opened
if(state.opened){
sessionstorage.setitem('sidebarstatus',1)
}else {
sessionstorage.setitem('sidebarstatus',0)
}
},
push_cancel(state, cancel){
state.axioscancelarr.push(cancel.canceltoken);
},
clear_cancel(state){
state.axioscancelarr.foreach(e=>{
e && e()
});
state.axioscancelarr = []
}
},
actions: {
pushcancel({commit}, cancel){
commit('push_cancel', cancel)
},
clearcancel({commit}){
commit('clear_cancel');
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论