uniapp请求request封装时统一处理token过期的解决方案
uniapp的request封装时,token过期的统一处理的解决方案
·
项目场景:
uniapp封装request时,token过期后统一处理
问题描述
请求头需要token,token有时间,时间到了,后端会返回一个状态码标志token过期了,需要重新获取token,之后再次请求此接口获取数据。
httpTokenRequest是封装的request方法
const httpTokenRequest = (opts, data) => {
let token = uni.getStorageSync('token')
let httpDefaultOpts = {
url: baseUrl + opts.url,
data: opts.data,
method: opts.method,
header: opts.method == 'GET' ? {
'X-ACCESS-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'X-ACCESS-TOKEN': token,
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8'
},
dataType: 'json',
}
let promise = new Promise(function(resolve, reject) {
uni.request(httpDefaultOpts).then(
(res) => {
if(res[0] && res[0].errMsg){
uni.showToast({
title: '网络异常!',
icon: 'none'
});
}else{
if(res[1].data.code == 1600){
//1600代表token过期,此时会调用获取token的接口
getToken().then(res =>{
//token获取成功后,httpTokenRequest自己调用自己,注意:由于上一个httpTokenRequest里的promise没有执行完就调用自己又开启一个promise,所以
//then返回的res是调用自己后reslove(res[1])的结果。reslove(res),才是最后返回的数据
httpTokenRequest(opts, data).then(res=>{
resolve(res)
})
})
}else{
resolve(res[1])
}
}
}
)
.catch(
(response) => {
reject(response)
}
)
})
return promise
};
优缺点分析:
提示:这里填写问题的分析:
另一个解决方案:写个带时间的存储方法,在存储token的时候,和后端设置同步的过期时间,在请求前拦截里,判断时间是否过期,再请求。
此方法的优点是少一次请求。
缺点是:需要在使用token的页面引用工具函数,时间还要设置统一,项目复杂的话不好管理,2.若请求时间较长,用户正好处于后端和前端交互的时间空隙。
上述的解决办法:缺点是多一次请求,需要先请求才能判断。
优点是,统一在此处处理,不需要别的工具函数
更多推荐
已为社区贡献2条内容
所有评论(0)