|
先说结论
业务流程: 从网络日志中检查到token过期，则跳转到登录页面，要求用户重新登录。 代码逻辑：使用自定义的HttpUtil封装wx.request API，全局捕获过期token并自动处理后，下发给上层业务。
问题
Token过期的现象： 在网络请求中，客户端token会过段时间过期，使得后续的网络请求失败，抛出异常日志如下： data: {code: "99997", date: 1634174831325, message: "TOKEN EXPIRED", status: "ERROR"}小程序提供的API: wx.request 是非常简单，只能在请求响应成功后的回调函数中开发者自己去检查token过期，常规的做法： 1.定义检查token过期的方法： function checkAuth(resp) { if(resp.data.code == '99997') { //我们服务器返回的token过期的code是99997，code可以和后台自定义。 wx.navigateTo({ url: '/pages/login/login', //这里跳转到登录页，要求用户重新登录 }) console.log("需要重新登录......"); }}2.在每个请求接口的响应中，调用checkAuth（res）去捕获token过期。 问题代码 function createMatchImage(data, fun) { //console.log(getApp()) console.log("token = " + getApp().getToken()) wx.request({ method: 'POST', url: conf.baseUrl + 'match/matchImages', data: data, header: { 'content-type': 'application/json', 'sessionKey': getApp().getToken() }, success: function (res) { console.log(res) conf.checkAuth(res) // 判断token是否过期，如果过期则跳转到登录页。 fun(res); } });} function getMatchImages(id, fun) { wx.request({ ... success: function (res) { conf.checkAuth(res) ... } });} function deleteImage(id, fun) {... wx.request({ ... success: function (res) { conf.checkAuth(res) fun(res); //return res; } });}在上面的代码中，每个接口都会有重复的代码，如配置baseUrl，token，checkAuth()。所以这里我们可以进一步去除重复代码。
解决方案
统一网络请求的入口，定义HttpUtil类。 封装wx.request方法。 const get = (url, success, fail) => { var _token = getApp().getToken() wx.request({ method:'GET', url: baseUrl + url, header:{ 'Authorization': _token, 'content-type': 'application/json', }, success:function(res) { checkAuth(res) // 在此处统一拦截token过期，跳转到登录界面 console.log(res) success(res) }, fail:function(res){ console.log("请求失败") fail(res) } })}
下载地址:
详细聊聊TypeScript中unknown与any的区别
JS中 querySelector 与 getElementById 方法区别 |
