hookehuyr

优化登录失效后中断后续请求

1 /* 1 /*
2 * @Date: 2023-10-27 11:12:24 2 * @Date: 2023-10-27 11:12:24
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-01 15:38:32 4 + * @LastEditTime: 2023-12-03 18:13:32
5 * @FilePath: /vue-flow-editor/doc/axios.js 5 * @FilePath: /vue-flow-editor/doc/axios.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -23,6 +23,10 @@ const parseQueryString = url => { ...@@ -23,6 +23,10 @@ const parseQueryString = url => {
23 return json; 23 return json;
24 } 24 }
25 25
26 +// 获取CancelToken
27 +const CancelToken = axios.CancelToken;
28 +const source = CancelToken.source();
29 +
26 /** 30 /**
27 * @description 请求拦截器 31 * @description 请求拦截器
28 */ 32 */
...@@ -37,6 +41,8 @@ axios.interceptors.request.use( ...@@ -37,6 +41,8 @@ axios.interceptors.request.use(
37 */ 41 */
38 // 绑定默认请求头 42 // 绑定默认请求头
39 config.params = { ...config.params, timestamp }; 43 config.params = { ...config.params, timestamp };
44 + // 全局添加cancelToken
45 + config.cancelToken = source.token;
40 return config; 46 return config;
41 }, 47 },
42 error => { 48 error => {
...@@ -50,8 +56,11 @@ axios.interceptors.request.use( ...@@ -50,8 +56,11 @@ axios.interceptors.request.use(
50 axios.interceptors.response.use( 56 axios.interceptors.response.use(
51 response => { 57 response => {
52 // 默认显示错误提示 58 // 默认显示错误提示
53 - response.data.show = true; 59 + // response.data.show = true;
54 if (response.data.msg === '登录失效') { 60 if (response.data.msg === '登录失效') {
61 + // 某个请求的响应满足特定条件的情况下,取消【其他正在进行的请求】
62 + source.cancel();
63 + //
55 ElMessageBox.alert('登录失效!将跳转到登录页面。', '温馨提示', { 64 ElMessageBox.alert('登录失效!将跳转到登录页面。', '温馨提示', {
56 confirmButtonText: '确定', 65 confirmButtonText: '确定',
57 callback: action => { 66 callback: action => {
......