问题
token过期或者失效后，弹窗提示用户登陆失效，重新登陆。
在一些页面中初始化时调了多个API，会出现多次弹出重新登陆的弹框
解决方案
1、使用axios中的CancelToken，在判断登陆失败时，取消后面的API请求。
2、跳转路由，取消上一个页面未请求成功的API。
实现方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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'); }} |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
