• 前端请求后台接口失败处理逻辑

    前后分离项目，前端为uni-app（vue2），后台为java

    后台api设置存在问题，部分公共接口为开放非登录用户访问权限

    导致前台打开首页后立即跳转到登录提示页

    怀疑是开了uni-app开发代理服务器，导致访问的代理服务器地址被拦截：

    http://localhost:3030/api/bms/getPostPageList?page=1&limit=12&hot=1

    由于不能通过单步执行，查找执行过程，只能在拦截代码中盲猜，始终未找到匹配的代码过程：

    1. import Vue from 'vue'
    2. import App from './App'
    3. import store from './store'
    4. import * as Db from './common/db.js'
    5. import $AppEntryController from './AppEntryController.js'
    6. import * as $apis from './apis/index.js'
    7. import $mRouter from './common/router.js'
    8. import $mUtils from './common/utils.js'
    9. import $mConfig from "./config/index.config.js"
    10. import $mAssetsPath from './config/assets.config.js'
    11. import $mRoutesConfig from './config/routes.config.js'
    12. import $mConstDataConfig from './config/constData.config.js'
    13. import $modalHelper from './common/modalHelper.js'
    14. import mPageView from "./components/m-page-view/m-page-view.vue"
    15.  
    16. Vue.component("yzb-page", mPageView)
    17.  
    18. const prePage = ()=>{
    19. 	let pages = getCurrentPages();
    20. 	let prePage = pages[pages.length - 2];
    21.     // #ifdef H5
    22.     return prePage;
    23.     // #endif
    24. 	return prePage.$vm;
    25. }
    26. Vue.prototype.$mPage ={prePage};
    27.  
    28. Vue.config.productionTip = false;
    29.  
    30. Vue.prototype.$AppEntryController = $AppEntryController;
    31.  
    32. Vue.prototype.$store =store;
    33.  
    34. Vue.prototype.$apis = $apis;
    35.  
    36. Vue.prototype.$mRouter = $mRouter;
    37.  
    38. Vue.prototype.$mUtils = $mUtils;
    39.  
    40. Vue.prototype.$mConfig = $mConfig;
    41.  
    42. Vue.prototype.$mAssetsPath = $mAssetsPath;
    43.  
    44. Vue.prototype.$mRoutesConfig = $mRoutesConfig;
    45.  
    46. Vue.prototype.$mConstDataConfig = $mConstDataConfig;
    47.  
    48. Vue.prototype.$modalHelper = $modalHelper;
    49.  
    50. Vue.prototype.$db = Db;
    51.  
    52. import GoEasy from "./lib/goeasy-2.4.7.min.js";
    53. const goEasy = GoEasy.getInstance({
    54. 	host:"hangzhou.goeasy.io",//应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
    55. 	appkey:"BC-88a9b720d97c4de88eefd2d64daf3fd0",	// common key,
    56.     modules:["im"],
    57. 	// true表示支持通知栏提醒，false则表示不需要通知栏提醒
    58.     allowNotification:true //仅有效于app,小程序和H5将会被自动忽略
    59. });
    60. Vue.prototype.GoEasy = GoEasy;
    61. Vue.prototype.goEasy = goEasy;
    62.  
    63. $mRouter.beforeEach((navType, to) => {
    64. 	if (to.route === undefined) throw ("路由钩子函数中没有找到to.route对象，路由信息:" + JSON.stringify(to));
    65.  
    66. 	console.log("进入路由过滤器")
    67. 	console.log("to=",to)
    68. 	if (to.route.path === $mRoutesConfig.login.path && store.getters.hasLogin) {
    69. 		uni.redirectTo({
    70. 			url: $mUtils.objParseUrlAndParam($mRoutesConfig.main.path, to.query)
    71. 		})
    72. 		return;
    73. 	}
    74.  
    75. 	// 过滤需要权限的页面
    76. 	if (to.route.requiresAuth) {
    77.  
    78. 		if (store.getters.hasLogin) {
    79. 			// 已经登录
    80. 			uni[navType]({
    81. 				url: $mUtils.objParseUrlAndParam(to.route.path, to.query)
    82. 			})
    83. 		} else {
    84. 			// 登录成功后的重定向地址和参数
    85. 			let query = {
    86. 				redirectUrl: to.route.path,
    87. 				...to.query
    88. 			}
    89. 			// 没有登录 是否强制登录?
    90. 			if (store.state.forcedLogin) {
    91. 				
    92. 				//#ifdef H5
    93. 				uni.redirectTo({
    94. 					url: $mUtils.objParseUrlAndParam($mRoutesConfig.loginPwd.path, query)
    95. 				})
    96. 				// #endif
    97. 				
    98. 				
    99. 				//#ifdef MP-WEIXIN
    100. 				uni.redirectTo({
    101. 					url: $mUtils.objParseUrlAndParam($mRoutesConfig.login.path, query)
    102. 				})
    103. 				// #endif
    104.  
    105. 			} else {
    106. 				
    107. 				//#ifdef H5
    108. 				uni.redirectTo({
    109. 					url: $mUtils.objParseUrlAndParam($mRoutesConfig.loginPwd.path, query)
    110. 				})
    111. 				// #endif
    112. 				
    113. 				//#ifdef MP-WEIXIN
    114. 				uni.redirectTo({
    115. 					url: $mUtils.objParseUrlAndParam($mRoutesConfig.login.path, query)
    116. 				})
    117. 				// #endif
    118.  
    119. 			}
    120. 		}
    121. 	} else {
    122. 		uni[navType]({
    123. 			url: $mUtils.objParseUrlAndParam(to.route.path, to.query)
    124. 		})
    125. 	}
    126. })
    127.  
    128. App.mpType = 'app'
    129.  
    130. const app = new Vue({
    131. 	store,
    132. 	...App
    133. })
    134. app.$mount()
    135.  
    136.  
    137. Vue.prototype.formatDate = function (t) {
    138.     t = t || Date.now();
    139.     let time = new Date(t);
    140.     let str = time.getMonth() < 9 ? ('0' + (time.getMonth() + 1)) : (time.getMonth() + 1);
    141.     str += '-';
    142.     str += time.getDate() < 10 ? ('0' + time.getDate()) : time.getDate();
    143.     str += ' ';
    144.     str += time.getHours();
    145.     str += ':';
    146.     str += time.getMinutes() < 10 ? ('0' + time.getMinutes()) : time.getMinutes();
    147.     return str;
    148. }
    149.  
    150. // 控制全局日志开关
    151. // console.log = (function (oriLogFunc) {
    152. //   return function () {
    153. //     //判断配置文件是否开启日志调试
    154. //     if (!true) {
    155. //       try{
    156. //         oriLogFunc.call(console, ...arguments);
    157. //       }catch(e){
    158. //         console.error('console.log error', e);
    159. //       }
    160. //     }
    161. //   }
    162. // })(console.log);

    重新查看uni-app发送http请求的代码段，发现在后台返回401时，代码直接跳转到登录流程：

    1. import store from "@/store"
    2. function HTTP(obj, config) {
    3.  
    4. 	let defaultConfig = {
    5. 		isRes: false,
    6. 		loading: false
    7. 	}
    8.  
    9. 	config = { ...defaultConfig,
    10. 		...config
    11. 	}
    12.  
    13.  
    14. 	// 如果需要显示loading,mask防止点击穿透
    15. 	config.loading && uni.showLoading({
    16. 		title: '加载中',
    17. 		mask: true
    18. 	});
    19.  
    20. 	return new Promise((resolve, reject) => {
    21.  
    22. 		let options = {
    23. 			url: "",
    24. 			method: "GET",
    25. 			data: {},
    26. 			dataType: "json",
    27. 			header: {
    28. 				"content-type": "application/json",
    29. 				"X-requested-With": "XMLHttpRequest",
    30. 				// 模拟用户登录
    31. 				//"X-Access-Token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTQ1MjM5NDEsInVzZXJuYW1lIjoiYWRtaW4ifQ.iGxw-j0uNi-rY96KuP9B4Jgx-t-Uk2mYZxVWMb7ySbo"
    32. 			},
    33. 			success: (res) => {
    34. 				//console.log("HTTP请求结果：",res)
    35. 				//console.log("resolve：",resolve)
    36. 				uni.hideLoading();
    37. 				// 状态码为200
    38. 				if (res.statusCode == 200) {
    39. 					let data = res.data;
    40.  
    41. 					//自动校验用户是否登录过期
    42. 					if (data.code == "01") {
    43. 						store.dispatch("reLogin");
    44. 						return;
    45. 					}
    46.  
    47. 					//返回 { code:10000,msg:"消息",data:[] }
    48. 					if (config.isRes) {
    49. 						resolve(data)
    50. 					}
    51. 					// 返回 data:[]
    52. 					else {
    53. 						if (data.code == "200") {
    54. 							//console.log("data对象：",data)
    55. 							resolve(data.result||true)
    56. 						} else {
    57. 							wx.showToast({
    58. 								title: data.message,
    59. 								icon: "none",
    60. 								duration: 2000
    61. 							})
    62. 							reject(data.message);
    63. 						}
    64. 					}
    65. 				}else if(res.statusCode == 401) {
    66. 					store.dispatch("reLogin");
    67. 					return;
    68. 				} else {
    69. 					reject("HTTP:状态码异常！");
    70. 				}
    71. 			},
    72. 			fail: (err) => {
    73. 				uni.hideLoading();
    74. 				uni.showToast({
    75. 					title: "网络异常，请稍后再试!",
    76. 					icon: "none",
    77. 				})
    78. 				reject("网络异常，请稍后再试!");
    79. 			},
    80. 			complete: () => {}
    81. 		}
    82.  
    83. 		options = { ...options,
    84. 			...obj
    85. 		};
    86. 		
    87. 		const OPENID = uni.getStorageSync("openId");
    88. 		const Token=uni.getStorageSync("token");
    89. 		// const location=uni.getStorageSync("location");
    90. 		// if(location){
    91. 		// 	//所有接口带上当前位置信息
    92. 		// 	options["data"]["latitude"] = location.latitude;
    93. 		// 	options["data"]["longitude"] = location.longitude;
    94. 		// 	options["data"]["pcitycode"] = location.pcitycode;
    95. 		// }
    96. 		console.log("Token==="+Token);
    97. 		if (OPENID) options["header"]["openId"] = OPENID;
    98. 		if (Token) options["header"]["X-Access-Token"] = Token;
    99. 		if (options.url && options.method) {
    100. 			wx.request(options);
    101. 		} else {
    102. 			wx.showToast({
    103. 				title: 'HTTP：缺失参数',
    104. 				icon: "none",
    105. 				duration: 2000
    106. 			})
    107. 		}
    108. 	})
    109.  
    110. }
    111.  
    112.  
    113.  
    114. export default {
    115. 	GET(url, data = {}, config) {
    116. 		return HTTP({
    117. 			url,
    118. 			data,
    119. 			method: "GET"
    120. 		}, config);
    121. 	},
    122. 	POST(url, data = {}, config) {
    123. 		return HTTP({
    124. 			url,
    125. 			data,
    126. 			method: "POST"
    127. 		}, config);
    128. 	},
    129.  
    130. 	POSTformdata(url, data = {}, config) {
    131. 		return HTTP({
    132. 			url,
    133. 			data,
    134. 			method: "POST"
    135. 		}, config);
    136. 	}
    137. }

    这个过程对用户不友好，应提示用户未登录无法查看数据，让用户确认跳转还是留在原始位置。

    解决办法是，使用wx.showModal（显示选择的对话框-带按钮），添加如下代码：

    1. else if(res.statusCode == 401) {
    2. 		let res_message = res.data.message // 因为wx.showModal也有res，需要另存变量名
    3. 					wx.showModal({
    4. 					  title: '是否需要登录？',
    5. 					  content: '提示：'+res_message,
    6. 					  complete: (res) => {
    7. 						if (res.cancel) {
    8. 							reject(res_message);
    9. 						}
    10. 						if (res.confirm) {
    11. 							store.dispatch("reLogin");
    12. 						}
    13. 					  }
    14. 					})
    15. 					
    16. 					
    17. 					// 这不是正常的promise流程，添加这段代码的人不是原作者
    18. 					// store.dispatch("reLogin");
    19. 					// return;
    20. 				}

    为了适应h5页面或小程序，添加条件编译：

    效果：

     点确定则跳转到登录页面，点取消则留在当前页面。

    参考：

    https://www.cnblogs.com/guanxinjing/p/17337941.html

    跨端兼容 | uni-app官网

    注意uni-app条件编译不需要在配置文件设置条件未MP-WEIXIN或者H5，在编译时自动判断。

  • 相关阅读:
    C语言学习（六）函数
    kafka3.X集群安装(不使用zookeeper)
    第二章 USB应用笔记之USB通讯基础
    可视化设计：一文读懂桑基图，从来处来，到去出去。
    Apache Paimon系列之：认识Paimon
    asp.net C#免费反编译工具ILSpy
    前端vue element axios混编团队发送数据到后端，后端接受使用的是$_POST
    Linux下用rm误删除文件的三种恢复方法
    undefined symbol: __gmpz_limbs_write 问题分析和解决
    ElasticSearch之Quick.ElasticSearch.Furion组件的使用
  • 原文地址：https://blog.csdn.net/qq_27361945/article/details/134015012