vue axios 封装请求拦截多次弹窗的问题及解决

溪余徐

问题

token过期或者失效后，弹窗提示用户登陆失效，重新登陆。
在一些页面中初始化时调了多个API，会出现多次弹出重新登陆的弹框

解决方案

1、使用axios中的CancelToken，在判断登陆失败时，取消后面的API请求。
2、跳转路由，取消上一个页面未请求成功的API。

实现方法

1. const myAxios = {
   
2.     install(Vue) {
   
3.         let http = axios.create({
   
4.             // baseURL: 'http://localhost:8088/hklms/app',
   
5.             // baseURL: process.env.BASE_API,
   
6.             timeout:1000,
   
7.             // transformRequest: [
   
8.             //     function (data){
   
9.             //         return qs.stringify(data, {
   
10.             //             indices: false
    
11.             //         })
    
12.             //     }
    
13.             // ]
    
14.             
    
15.         })
    
16.         http.interceptors.request.use(
    
17.             config => {
    
18.                 config.cancelToken = new axios.CancelToken((cancel) => {
    
19.                     //使用vuex 定义pushCancel，请求进来存入
    
20.                     store.dispatch('user/pushCancel', {cancelToken:cancel})
    
21.                   });
    
22.                 if (store.state.user.token) {
    
23.                     config.headers['token'] = store.state.user.token
    
24.                 }
    
25.                 return config
    
26.             },
    
27.             error => {
    
28.                 console.log(error)
    
29.             }
    
30.         )
    
31.         http.interceptors.response.use(
    
32.             response => {
    
33.                 const res = response.data;
    
34.                 if(res.code && res.code === 401){
    
35.                     store.dispatch('user/clearCancel');
    
36.                     sessionStorage.clear()
    
37.                     Message.error(res.msg)
    
38.                     router.push("/login")
    
39.                     return Promise.reject(error);
    
40.                 }else {
    
41.                     return response
    
42.                 }
    
43.                
    
44.             },
    
45.             error => {
    
46.                 return Promise.reject(error);
    
47.             }
    
48.             
    
49.         )

复制代码

store中 user.js

1. state: {
   
2. axiosCancelArr:[],
   
3. }
   
4. mutations:{
   
5.         CLOSE_SIDEBAR: (state) => {
   
6.             state.opened = !state.opened
   
7.             if(state.opened){
   
8.                 sessionStorage.setItem('sidebarStatus',1)
   
9.             }else {
   
10.                 sessionStorage.setItem('sidebarStatus',0)
    
11.             }
    
12.             
    
13.         },
    
14.         PUSH_CANCEL(state, cancel){
    
15.             state.axiosCancelArr.push(cancel.cancelToken);
    
16.           },
    
17.       
    
18.           CLEAR_CANCEL(state){
    
19.             state.axiosCancelArr.forEach(e=>{
    
20.               e && e()
    
21.             });
    
22.             state.axiosCancelArr = []
    
23.         }
    
24. },
    
25. actions: {
    
26.         pushCancel({commit}, cancel){
    
27.             commit('PUSH_CANCEL', cancel)
    
28.      },
    
29.     clearCancel({commit}){
    
30.             commit('CLEAR_CANCEL');
    
31.     }
    
32. }

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326738hnv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！