vue axios 封装请求拦截多次弹窗的问题及解决
更新时间:2024年08月30日 14:55:53 作者:Zero0985
这篇文章主要介绍了vue axios 封装请求拦截多次弹窗的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
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'); } }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
这篇文章主要介绍了axios封装使用拦截器处理接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-05-05nuxt 服务器渲染动态设置 title和seo关键字的操作
这篇文章主要介绍了nuxt 服务器渲染动态设置 title和seo关键字的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论